CKEditor – alterando o layout

Sempre trabalhei muito com o TinyMCE Editor, mas resolvi testar o CKEditor num projeto no qual estou trabalhando. Não tenho uma opinião formada a respeito, principalmente quando comparado ao TinyMCE. Conheço esse segundo há anos, sei das limitações, como trabalhar com ele, oq eu funciona e o que não funciona… por enquanto, o CKEditor me parece ser uma boa alternativa.

Para quem está começando com ele, indico a documentação oficial da versão corrente (3.x) como base.

Vamos a alguns exemplos de como customizá-lo (tudo isso sendo feito dentro do config.js, o arquivo de configuração do editor):

Alterar o idioma para português

CKEDITOR.editorConfig = function( config ) {
    config.language = "pt-br";
};

Definir os itens das toolbars

CKEDITOR.config.toolbar = [
   ["Source"],
 ["Bold","Italic","Underline","StrikeThrough","-","Undo","Redo","-","Cut",

"Copy","Paste","PasteText","PasteFromWord","Find","Replace","-",
"Outdent","Indent","NumberedList","BulletedList"],
   ["-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
   ["Image","Table","-","Link","Flash","TextColor","BGColor","Format","Font","FontSize"],
 ];

Existem diversas outras opções para as toolbars, veja em http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

Retirando o rodapé

CKEDITOR.config.removePlugins = "elementspath";
CKEDITOR.config.resize_enabled = false;

Por hora, é isso. Em breve faço um post de como utilizar o editor!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *