Simples WYSIWYG Editor

CursoCriando uma aplicação com área administrativa utilizando o Laravel

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.