Depois de muita procura na Internet, depois de muitos testes, eu finalmente achei um editor de texto em JavaScript que satisfazesse minhas necessidades, testei o FCKeditor, NicEdit(esse eu gostei muito, é bem leve e simples,pena que não “produza” código em (X)HTML ) e o TinyMCE, esse ultimo realmente superou as expectativas, ele é leve, bem completo, tem 2 opções de uso: o Simples e o Avançado, além de skins, integração fácil de se fazer e fácil de personalizar e o melhor, dentro dos padrões.
O TinyMCE transforma automaticamente qualquer textarea (obviamente os textareas que estão na página, cuja o script de integração esteja aplicado ) em um editor HTML Rich Text, segue abaixo então como fazer essa integração:
- Baixe o pacote no site do TinyMCE
- Descompacte na pasta onde está a página que deseja instalar o TinyMCE
- Abra o arquivo desejado e entre as tag <head>…</head>, coloque uma dessas opções:
Modo Simples:
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
Modo Avançado:
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
Nota #1: Caso você ache alguns botões desnecessários basta exclui-los/desabilitá-los, nas seguintes linhas:
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
Nota #2:Para mudar o posicionamento da bara de ferramenta no textarea, basta alterar as seguintes linhas:
theme_advanced_toolbar_location : "top", //poderá mudar para bottom
theme_advanced_toolbar_align : "left", //poderá mudar para right
theme_advanced_statusbar_location : "bottom",//poderá mudar para top
theme_advanced_resizing : true,
Nota #3: Sobre a o pacote de tradução, sinceramente não consegui ainda faze-lá funcionar, então resolvi eu mesmo acessar a pasta: tinymce/jscripts/tiny_mce/themes/advanced/langs/ e editar os arquivos…um pouquinho de inglês técnico já basta!
Tradução
UPDATE: O Vinicius me avisou ali em baixo nos comentários, que enviou um pacote de tradução atualizado para o site oficial do TinyMCE, eu já testei e está funcionado muito bem. Então vamos ver como fazer a tradução:
2- com o pacote extraido, copie as pastas para o diretório – \tinymce\jscripts\tiny_mce – e substitua os pacotes.
3- Feito os passos 1,2 corretamente adicione a seguinte linha(em vermelho):
[...]tinyMCE.init({
// General options
language : "pt", // adicione esta linha
mode : "textareas",
theme : "advanced",[...]
Você pode adicionar esta linha tanto modo simples, quanto no avançado.
Pronto, agora é só se divertir!
<pre><script type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
mode : “textareas”,
theme : “simple”
});
</script></pre>
<strong>Modo Avançado:</strong>
<pre><script type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,
// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : “css/content.css”,
// Drop lists for link/image/media/template dialogs
template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,
// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234″
}
});
</script></pre>
