Editores WYSIWYG são siglas de “O que você vê é o que você tem”, eles são muito utilizados em administração de sites por fornecer uma edição e visualização em tempo real, sem a necessidade de inserir códigos HTML para se obter um determinado Resultado.
Existem vários editores, desde o mais simples até o mais complexo, como é o caso do CKEDITOR, porém alguns usuários relatam certa dificuldade e problemas ao usar algum deste editor, por não atender suas necessidades.
Simple WYSIWYG Editor é uma nova opção totalmente Open Source e simples, ele é composto de dois arquivos, um css e outro js.
Sua utilização é muito simples, basta importar os dois arquivos externos e a pasta de imagem para dentro do seu projeto e por último copiar e colar as Tags HTML para onde você quer que o editor fique posicionado.
Todas as edições são feitas dentro de um Iframe, pois o mesmo permite edição de seu conteúdo, sendo assim todo o código HTML que é gerado é enviado a um Textarea com um identificador chamado txtEditor, a cada um segundo o algoritmo copia o HTML do Iframe e envia para dentro do Textarea, tando no PHP quanto no ASP.Net por exemplo, você só precisa pegar o conteúdo do Textarea que o mesmo contém todas as informações que você precisa.
Qualquer usuário pode utilizar e modificar o sistema, portanto leia as Politicas de privacidade e Termos de uso do nosso site, é expressamente proibido a comercialização do sistema, já que o mesmo vem sendo distribuído Open Source.
<!doctype html>
<html lang="pt-br">
<head>
<title>WYSIWYG</title>
<!--
WHAT YOU SEE IS WHAT YOU GET
-->
<meta charset="utf-8" />
<link rel="stylesheet" href="css/editorwys.css" type="text/css" media="all" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="dvCenterEditor">
<div id="bar">
<button id="btn_new" class="btn"></button>
<button id="btn_delete" class="btn"></button>
<button id="btn_copy" class="btn margin"></button>
<button id="btn_cut" class="btn"></button>
<button id="btn_paste" class="btn"></button>
<button id="btn_undo" class="btn margin"></button>
<button id="btn_redo" class="btn"></button>
<select id="slFonte" class="margin">
<option value="courier">courier</option>
<option value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
<option value="Segoe">Segoe</option>
<option value="Calibri">Calibri</option>
</select>
<select id="slSize" class=" margin">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button id="btn_bold" class="btn margin"></button>
<button id="btn_italic" class="btn"></button>
<button id="btn_underline" class="btn"></button>
<button id="btn_color" class="btn margin"></button>
<button id="btn_paragraph" class="btn"></button>
<button id="btn_left" class="btn"></button>
<button id="btn_center" class="btn"></button>
<button id="btn_right" class="btn"></button>
<button id="btn_justify" class="btn"></button>
<button id="btn_line" class="btn margin"></button>
<button id="btn_unordered" class="btn"></button>
<button id="btn_ordered" class="btn"></button>
<button id="btn_link" class="btn margin"></button>
<button id="btn_link_break" class="btn"></button>
<button id="btn_image" class="btn margin"></button>
<button id="btn_audio" class="btn"></button>
<button id="btn_select" class="btn margin"></button>
</div>
<iframe id="Editor" name="Editor" ></iframe>
<textarea id="txtEditor" style="display:none;"></textarea>
</div>
</body>
</html>Em caso de dúvidas referente a sua utilização, deixe nos comentários da página.
