<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Princi Agência Web - Blog &#187; JavaScript</title>
	<atom:link href="http://www.princiweb.com.br/blog/category/javascript/feed/eurl.axd/b316b203c626ac48b1758047ac57a85d" rel="self" type="application/rss+xml" />
	<link>http://www.princiweb.com.br/blog</link>
	<description>Artigos sobre Programação Web / Novidades da Princi Agência Web</description>
	<lastBuildDate>Thu, 12 Jan 2012 00:39:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Editores Web WYSIWYG</title>
		<link>http://www.princiweb.com.br/blog/javascript/editores-web-wysiwyg/</link>
		<comments>http://www.princiweb.com.br/blog/javascript/editores-web-wysiwyg/#comments</comments>
		<pubDate>Wed, 27 Jan 2010 13:30:30 +0000</pubDate>
		<dc:creator>Rodolfo Pereira</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[editores web]]></category>
		<category><![CDATA[editores wysiwyg]]></category>

		<guid isPermaLink="false">http://www.princiweb.com.br/blog/?p=701</guid>
		<description><![CDATA[Em sistemas para internet, é bastante comum utilizarmos Editores Web WYSIWYG para oferecermos aos nossos clientes uma interface amigável para que ele possa editar seus textos e colocá-los em seus sites. Os Editores WYSIWYG (acrônimo em inglês para &#8220;What You See Is What You Get&#8221; e em português para &#8220;O que você vê é o [...]]]></description>
			<content:encoded><![CDATA[<p>Em <a href="http://www.princiweb.com.br/servicos-internet/Desenvolvimento-Sistemas-Internet.aspx">sistemas para internet</a>, é bastante comum utilizarmos Editores Web WYSIWYG para oferecermos aos nossos clientes uma interface amigável para que ele possa editar seus textos e colocá-los em seus sites.</p>
<p>Os Editores WYSIWYG (acrônimo em inglês para &#8220;What You See Is What You Get&#8221; e em português para &#8220;O que você vê é o que você obtém&#8221;) possuem uma interface bastante intuitiva e poderosa, nos dando a opção de formatarmos os nossos textos, realizarmos upload de arquivos, entre outras funções. Antigamente, os Editores WYSIWYG geravam um código não elegante e não validado; hoje em dia, a realidade é bastante diferente, pois eles conseguem gerar um código elegante e quase sempre, validados de acordo com os <a href="http://www.princiweb.com.br/blog/xhtml-html-css/padroes-web-o-que-sao-e-porque-usa-los">Padrões Web estabelecidos pelo W3C</a>.</p>
<p>Aqui irei listar alguns dos Editores Web WYSIWYG, que sem dúvidas, irão facilitar o desenvolvimento do seu sistema ou site.</p>
<p><span id="more-701"></span></p>
<h2>CKEditor</h2>
<div class="img-centro"><a href="http://ckeditor.com/"><img title="CKEditor" src="http://www.princiweb.com.br/blog/wp-content/uploads/2010/01/ckeditor.png" alt="CKEditor" width="500" height="188" /></a></div>
<p>O CKEditor é a nova versão do antigo e conhecido FCKeditor. Particularmente, atualmente o considero o mais poderoso e amigável dos Editores Web WYSIWYG que existem.</p>
<p>Em termos de acessibilidade, o CKEditor possui suporte aos padrões <a onclick="this.target='_blank'" href="http://www.w3.org/WAI/WCAG1AA-Conformance">WAI-AA WCAG 1.0 <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> e <a onclick="this.target='_blank'" href="http://www.section508.gov/">Section 508 <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>, contando com suporte total à navegação pelo teclado, leitores de tela e contraste de cores.</p>
<p>A sua compatibilidade com navegadores e sistemas operacionais é grande, funcionando nos navegadores Internet Explorer 6+, Firefox 2+, Safari 3+, Google Chrome e Opera 9.5+, todos em suas versões para Windows, Linux e MAC.</p>
<p>A sua &#8220;carta na manga&#8221; é o poderoso <a onclick="this.target='_blank'" href="http://ckfinder.com/">CKFinder <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>, o qual lhe possibilita o upload de arquivos e imagens. Integrando-o ao CKEditor, você possuirá uma solução completa em Editor Web WYSIWYG.</p>
<p>O <a onclick="this.target='_blank'" href="http://ckeditor.com/support">suporte do CKEditor e CKFinder <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> é bastante completo, contando com a <a onclick="this.target='_blank'" href="http://docs.cksource.com/">documentação <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> de ambos os softwares e um <a onclick="this.target='_blank'" href="http://cksource.com/forums/">Fórum para discussão <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>. Dificilmente você ficará na mão, caso você tenha alguma dúvida em relação ao CKEditor ou CKFinder.</p>
<p>Mas caso você não utilize o CKEditor para uso pessoal ou educacional, você terá que <a onclick="this.target='_blank'" href="http://ckeditor.com/license">comprar uma licença <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>, que custa de US $375 a US $1450. Já o CKFinder, você é obrigado a <a href="http://ckfinder.com/purchase">comprar uma licença <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> para utilizá-lo, que custa de US $59 a US $1390.</p>
<p><strong>CKEditor</strong><br />
<a onclick="this.target='_blank'" href="http://ckeditor.com/">http://ckeditor.com/ <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a></p>
<p><strong>CKFinder</strong><br />
<a onclick="this.target='_blank'" href="http://ckfinder.com/">http://ckfinder.com/ <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a></p>
<h2>TinyMCE</h2>
<div class="img-centro"><a href="http://tinymce.moxiecode.com/"><img title="TinyMCE" src="http://www.princiweb.com.br/blog/wp-content/uploads/2010/01/tinymce.gif" alt="TinyMCE" width="500" height="188" /></a></div>
<p>O TinyMCE é um outro grande Editor Web WYSIWYG disponível no mercado. Grandes empresas como Oracle, Microsoft e Apple utilizam o TinyMCE em suas aplicações.</p>
<p>Fácil de ser integrado à sua aplicação, o TinyMCE é compátivel com Mozilla, MSIE, FireFox, Opera, Safari e Chrome.</p>
<p>O suporte do TinyMCE é composto de uma <a onclick="this.target='_blank'" href="http://tinymce.moxiecode.com/documentation.php">documentação (wiki) <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>, um <a onclick="this.target='_blank'" href="http://tinymce.moxiecode.com/punbb/">Fórum <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> e um <a onclick="this.target='_blank'" href="http://tinymce.moxiecode.com/support.php">suporte pago <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>. Assim, o suporte do TinyMCE se mostra bastante completo, não te deixando na mão em relação a dúvidas ou bugs do software.</p>
<p>Assim como CKEditor, se você utilizar o TinyMCE para uso comercial, você deverá comprar uma licença. Infelizmente, o preço da licença não está disponível no site do software, sendo necessário enviar um e-mail para obter maiores informações sobre a licença comercial.</p>
<p>No site do TinyMCE é disponibilizado dois plugins que se integram ao TinyCME, que são o <a onclick="this.target='_blank'" href="http://tinymce.moxiecode.com/plugins_imagemanager.php">MCImageManager <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> e <a onclick="this.target='_blank'" href="http://tinymce.moxiecode.com/plugins_filemanager.php">MCFileManager <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>. Eles aumentam o poder do TinyMCE, disponibilizando o upload de arquivos e imagens integrados ao TinyMCE. Ambos os plugins necessitam de uma licença para utilizá-los.</p>
<p><strong>TinyMCE</strong><br />
<a href="http://tinymce.moxiecode.com/">http://tinymce.moxiecode.com/ <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a></p>
<h2>jWYSIWYG</h2>
<div class="img-centro"><a onclick="this.target='_blank'" href="http://code.google.com/p/jwysiwyg/"><img title="jwysiwyg" src="http://www.princiweb.com.br/blog/wp-content/uploads/2010/01/jqueryeditor.gif" alt="jwysiwyg" width="500" height="188" /></a></div>
<p>O jWYSIWYG é um plugin em jQuery de Editor Web WYSIWYG, por isso, para utilizá-lo você precisa utilizar a <a onclick="this.target='_blank'" href="http://jquery.com/">biblioteca jQuery <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>.</p>
<p>A vantagem do jWYSIWYG em relação ao CKEditor e TinyMCE, é a sua extrema simplicidade em integrá-lo ao seu sistema ou site, seu pequeno tamanho (26Kb no total, 18Kb de código e 7Kb comprimido) e o melhor: a licença do jWYSIWYG é baseada nas licenças GPL/MIT*.</p>
<p>A sua compatibilidade total limita-se aos navegadores Safari 4, Firefox 3.5, Chrome 4.0 e Internet Explorer 8. Caso for outro navegador ou outra versão dos navegadores citados anteriormente, o jWYSIWYG poderá apresentar alguns erros.</p>
<p><strong>jWYSIWYG</strong><br />
<a onclick="this.target='_blank'" href="http://code.google.com/p/jwysiwyg/"> http://code.google.com/p/jwysiwyg/ <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a></p>
<h2>jHtmlArea</h2>
<div class="img-centro"><a href="http://jhtmlarea.codeplex.com/"><img title="jHtmlArea" src="http://www.princiweb.com.br/blog/wp-content/uploads/2010/01/jhtmlarea.gif" alt="jHtmlArea" width="500" height="188" /></a></div>
<p>jHtmlArea é um plugin em jQuery de Editor Web WYSIWYG.</p>
<p>Os navegadores Internet Explorer 7/8, Firefox 3/3.5 e Safari 4 possuem suporte completo ao editor.</p>
<p>A licença do jHtmlArea é baseada nas licenças GPL/MIT*.</p>
<p>O suporte do jHtmlArea conta com um <a onclick="this.target='_blank'" href="http://jhtmlarea.codeplex.com/Thread/List.aspx">fórum de discussão <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> e uma <a onclick="this.target='_blank'" href="http://jhtmlarea.codeplex.com/WorkItem/List.aspx">lista para relato de problemas <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a>.</p>
<p><strong>jHtmlArea<br />
<span style="font-weight: normal;"><a onclick="this.target='_blank'" href="http://jhtmlarea.codeplex.com/">http://jhtmlarea.codeplex.com/ <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a></span></strong></p>
<h2>markItUp!</h2>
<div class="img-centro"><a onclick="this.target='_blank'" href="http://markitup.jaysalvat.com/home/"><img title="MarkItUp" src="http://www.princiweb.com.br/blog/wp-content/uploads/2010/01/marktiup.gif" alt="MarkItUp" width="500" height="188" /></a></div>
<p>markItUp! é um plugin em jQuery de Editor Web de MarkUp. Ele possui suporte a navegação pelo teclado, oferecendo um diferencial em usabilidade em relação aos demais plugins em jQuer. Seu poder de customização é grande e oferece cinco estilos prontos, como por exemplo um do MacOS e outro do Windows Live.</p>
<p>O markItUp! oferece suporte aos navegadores IE6+, Safari 3.1+, Firefox 2+ e Opera 9+. O suporte oferecido pelo plugin é somente a sua <a onclick="this.target='_blank'" href="http://markitup.jaysalvat.com/documentation/">documentação <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a> e infelizmente ele  não possui nenhum fórum de discussão.</p>
<p>A licença do markItUp! é baseada nas licenças GPL/MIT*.</p>
<p><strong>markItUp!</strong><br />
<a onclick="this.target='_blank'" href="http://markitup.jaysalvat.com/home/">http://markitup.jaysalvat.com/home/ <img title="Site Externo" src="http://www.princiweb.com.br/img/site-ext-preto.gif" alt="Site Externo" width="17" height="11" /></a></p>
<p><em>* A licença GPL/MIT possibilita o uso do software em programas livres ou proprietários sem ter que comprar uma licença e também oferece a liberdade de executar o programa para qualquer propósito.</em></p>
<p>Caso você conhece outro Editor Web WYSIWYG, compartilhe-o conosco comentando logo abaixo!</p>
<ul class="related_post"><li>Não há artigos relacionados.</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.princiweb.com.br/blog/javascript/editores-web-wysiwyg/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

