Simples WYSIWYG Editor

Gunnar CorreaGunnar Correa16/03/2015 às 03:30:09 - 15.579 acessos

WYSIWYG, desenvolvido pelo SatellaSoft com código fonte disponível.


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.

Editor WYSIWYG com javascript

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.


Referências


editor wysiwyg modelo formatação html site parágrafos recursos administração texto php asp.net iframe open source

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários