Lokirj

Pode-se dizer que o Xinha é um plugin em javascript que transforma um textarea em um WYSIWYG , perfeito para uso em sistemas e para dar um tchan em alguns formulários. Antes eu usava o TinyMCE, que também é muito bom (e mais leve), entretanto o Xinha acabou ganhando a preferência – O imageManager dele é uma mão na roda.

Segue os passos para utilizar o Xinha editor com CakePHP.

1. Baixar do site http://trac.xinha.org/ a última versão do Xinha editor.
   Eu usei nos meus testes a 0.96beta2 e não tive problemas, embora seja beta já é madura o suficiente.
2. Decompactar o pacote na pasta vendors em app
   Eu preferi colocar o Xinha na pasta vendor pelo fato de ser um script feito por terceiros, acho que fica mais correto, mas podia te-lo colocado na pasta javascript em webroot.
3. No controller do seu formulário, faça a chamada do helper javascript .
   Eu me atrapalhei um pouco aqui, pois não conseguia entender como um item que esta na pasta vendors poderia ser chamado através de um helper com nome diferente.var $helpers = array(‘Form’, ‘Html’, ‘Javascript’, ‘Time’);
4. Na view, eu fiz a inclusão do blocos de script usando o helper javascript.

codeBlock('
_editor_url = "/cake/js/xinha/";
_editor_lang = "en";');

echo $javascript->link('xinha/XinhaCore.js');

echo $javascript->codeBlock('
xinha_editors = null;
xinha_init    = null;
xinha_config  = null;
xinha_plugins = null;

xinha_init = xinha_init ? xinha_init : function()
{
xinha_editors = xinha_editors ? xinha_editors :
[
\'TemplateEmailHtml\'
];

xinha_plugins = xinha_plugins ? xinha_plugins :
[
\'ImageManager\'
];

if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;

xinha_config = xinha_config ? xinha_config() : new Xinha.Config();

//this is the standard toolbar, feel free to remove buttons as you like
xinha_config.toolbar =
[
["fontname","fontsize","bold","italic","underline"],
["separator","justifyleft","justifycenter","justifyright","justifyfull"],
["separator","inserthorizontalrule","createlink","insertimage"],
["linebreak","insertorderedlist","separator","insertunorderedlist"],
["separator","htmlmode"]
];

xinha_config.pageStyleSheets = [ _editor_url + "examples/full_example.css" ];

xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);

Xinha.startEditors(xinha_editors);
}

Xinha._addEvent(window,\'load\', xinha_init);');

endif;
?>

Eu tive um pouco de trabalho para botar pra funcionar, ainda não esta no meu ideal, mas já é um começo.

Se alguém souber de uma maneira mais correta de se trabalhar com o Xinha, deixe um comentário com a dica