[Resolvido] Integrando Ckeditor com Ckfinder no Cakephp

[RSS iMasters 5]

Recentemente, eu comecei a estudar o framework cakephp e uma das primeiras coisas que procurei saber foi como integrar o Ckeditor e Ckfinder - no caso de PHP. Depois de algumas xícaras de café e de ler muitos artigos a respeito, eu consegui. Vale citar que mesclei vários tutoriais e artigos e no fim juntei tudo para conseguir que funcionasse.

A primeira coisa a se fazer é os respectivos downloads:

 

• http://cakephp.org/
• http://ckeditor.com/
• http://ckfinder.com/

Então, mãos na massa! Vamos extrair o cake na pasta desejada - no meu caso será /var/www/cake. Abra o diretório e acesse a seguinte pasta:

/var/www/cake/app/webroot/js

Agora vamos extrair o Ckeditor Ckfinder e colocá-los nessa pasta, ficando assim:

    /cake

/app

/webroot

/js

/ckeditor

/ckfinder

Agora vem a mágica: acesse a pasta do Ckeditor e abra o arquivo config.js. Você verá o seguinte código:

 

    CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

 

};

Troque-o por:

 

    CKEDITOR.editorConfig = function( config ){

config.filebrowserBrowseUrl = '../js/ckfinder/ckfinder.html',

config.filebrowserImageBrowseUrl = '../js/ckfinder/ckfinder.html?type=Images',

config.filebrowserFlashBrowseUrl = '../js/ckfinder/ckfinder.html?type=Flash',

config.filebrowserUploadUrl = '../js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',

config.filebrowserImageUploadUrl = '../js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

config.filebrowserFlashUploadUrl = '../js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

};

Agora, na sua view adicione a chamada para os js e insira-os no default.ctp, assim sempre que precisar é só chamar o JavaScript para criar o Ckeditor:

    <?php

echo $this->Html->script('ckeditor/ckeditor.js');

echo $this->Html->script('ckfinder/ckfinder.js');

?>

Na view que deseja usar o Ckeditor é só fazer o seguinte:

 

    <script type="text/javascript">

var ckEditor = CKEDITOR.replace( 'texto' );

</script>

<?php echo $this->Form->textarea('texto', array('id'=>'texto','class'=>'ckeditor'));?>

Pronto, já temos o Ckeditor funcionando, porém o Ckfinder ainda não está. O objetivo agora é deixar tudo funcionando direitinho.

Vamos alterar a URL do Ckeditor, assim não dará erro, pedindo o controller. Abram sem seguida o arquivo config.php na pasta do Ckfinder e procure por $baseUrl. Adicionem o caminho no qual as imagens serão salvas - no meu caso será:

$baseUrl = '/cake/app/webroot/img/';///coloquei na própria pasta img publica do webroot

Alterem também o retorno da função ?CheckAuthentication? para true.

Pronto, temos o Ckeditor com Ckfinder funcionando. Vale lembrar que não devem se esquecer das permissões.

Isso de estudar o cakephp foi algo inesperado, mas muito prazeroso, então, pretendo continuar a conhecer esse íncrivel framework e vou escrevendo sobre as descobertas.

 

http://imasters.com.br/artigo/23787/cake-php/integrando-ckeditor-com-ckfinder-no-cakephp