Usando CKEditor + CKFinder com o CodeIgniter

CKEditor

Caso você não conheça, o CKEditor (antigo FCKEditor) é visto como um dos melhores editores WYSIWYG open source para HTML, outra boa opção é o TinyMCE. Com eles você pode criar uma caixa de texto “rico”, com formatação de texto, inserção de links, imagens. Você pode até criar formulários.
Ambos funcionam só com Javascript, e são compatíveis com versões variadas dos browsers mais comuns. Como optei por usar o CKEditor, é dele que vou falar.

ckeditor

Com o CKEditor What You See Is What You Get (talvez não com o IE6)

CKFinder

Já o CKFinder é um plugin para o CKEditor, permitindo um gerenciamento completo de arquivos. Com ele você pode navegar nos diretórios do seu servidor e fazer upload de arquivos variados.
O único problema é que ele é pago, mas você pode baixar uma versão demo com a ausência de algumas features.

( Quase ) tudo é traduzido automaticamente. A mensagem da versão demo não foi.

Feitas as devidas apresentações, vamos ao trabalho.

Primeiramente baixemos o CKEditor (http://ckeditor.com/download). Eu coloquei a pasta principal dentro da pasta de Javascript, mas isso é indiferente.

A implementação comum dele é muito fácil, mas pra usá-lo no CodeIgniter de forma elegante, é melhor criar um helper. Mas alegrai-vos, o mundo open source é maravilhoso, já existe uma versão para baixar, contribuição de um membro do Fórum oficial do CodeIgniter. Ele dedicou um post em seu blog à esse helper, mas vou explicar aqui também, de qualquer forma.

Baixe o helper aqui: ckeditor_helper. Eu salvei dentro da pasta do CKEditor.
Agora vamos criar um controller e a uma view para testarmos.

controllers/ckexemplo.php

<?php
class Ckexemplo extends Controller
{
    function __construct()
    {
        parent::Controller();
        $this->load->helper('url');
    }
 
    public function index()
    {
        // Carregando o ckeditor_helper.php recém criado
        $this->load->helper('ckeditor'); 
 
        // Array com as configurações pra essa instância do CKEditor ( você pode ter mais de uma )
        $data['ckeditor_texto1'] = array
        (
            //id da textarea a ser substituída pelo CKEditor
            'id'   => 'texto1',
 
            // caminho da pasta do CKEditor relativo a pasta raiz do CodeIgniter
            'path' => 'system/application/js/ckeditor',
 
            // configurações opcionais
            'config' => array
            (
                'toolbar' => "Full",
                'width'   => "400px",
                'height'  => "100px",
            )
        );
 
        $this->load->view('ckexemplo', $data);
    }
}
?>


views/ckexemplo.php

<textarea id="texto1" name="texto1">
    Texto de Exemplo<br/>
    Tudo supimpa por aqui?
</textarea>
<?php echo display_ckeditor($ckeditor_texto1); ?>

Se tudo deu certo, seu textarea deve ficado ryco, com dezenas de botões. Mas se tentar inserir uma imagem verá que a única opção de inserção, é colocando uma URL.
Vamos ao CKFinder: baixe-o em http://ckfinder.com/download, e coloque sua pasta principal na pasta do CKEditor (ou em qualquer lugar).

Abra o config.php dentro da pasta do CKFinder, lá você tem muitas opções (que você pode ver melhor nos Docs), mas por agora localize a função CheckAuthentication(). Ela que verifica sua autenticação para evitar a usuários mal-intencionados, no mínimo seria bom haver uma validação de sessão, no mínimo. Mas para esse teste, basta que essa função retorne true.
Um pouco mais abaixo você localizará a linha com $baseUrl = ‘/ckfinder/userfiles/';
Muito importante: se você deixar como está, será criada essa pasta na raiz do seu servidor. Veja os exemplos acima e configure como achar melhor.
O útimo passo agora é setar os caminhos de upload na nossa instância do CKEditor, volte ao seu controllers/ckeditor.php e acrescente algumas linhas:

<?php
class Ckexemplo extends Controller
{
    function __construct()
    {
        parent::Controller();
        $this->load->helper('url');
    }
 
    public function index()
    {
        // Carregando o ckeditor_helper.php recém criado
        $this->load->helper('ckeditor'); 
 
        // Array com as configurações pra essa instância do CKEditor ( você pode ter mais de uma )
        $data['ckeditor_texto1'] = array
        (
            //id da textarea a ser substituída pelo CKEditor
            'id'   => 'texto1',
 
            // caminho da pasta do CKEditor relativo a pasta raiz do CodeIgniter
            'path' => 'system/application/js/ckeditor',
 
            // configurações opcionais
            'config' => array
            (
                'toolbar' => "Full",
                'width'   => "400px",
                'height'  => "100px",
                'filebrowserBrowseUrl'      => base_url().'system/application/js/ckeditor/ckfinder/ckfinder.html',
                'filebrowserImageBrowseUrl' => base_url().'system/application/js/ckeditor/ckfinder/ckfinder.html?Type=Images',
                'filebrowserFlashBrowseUrl' => base_url().'system/application/js/ckeditor/ckfinder/ckfinder.html?Type=Flash',
                'filebrowserUploadUrl'      => base_url().'system/application/js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
                'filebrowserImageUploadUrl' => base_url().'system/application/js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
                'filebrowserFlashUploadUrl' => base_url().'system/application/js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
            )
        );
 
        $this->load->view('ckexemplo', $data);
    }
}
?>


Feito tudo isso corretamente, agora você poderá estar(!) usufruindo de uma navegação de pastas e upload de arquivos.
Essas 6 ULRs adicionadas, são os caminhos de upload e navegação do CKEditor, o que eu fiz foi “apontar” diretamente para as pastas respectivas do CKFinder, mas você pode usar biblioteca de terceiros, ou desenvolver algo próprio pra isso.
Se você não conhecia esses plugins, recomendo agora dar uma lida nas documentações deles.
A toolbar, por exemplo, você não precisa oferecer com todos essas opções para o seu usuário, como você pode ver aqui.



Fiquem a vontade para dúvidas e acréscimos!



Ps¹.: Como você pode ver, a index.php da raiz do CodeIgniter não está presente na URL, isso porque estou evitando, neste caso, de usar a engine do CI para abrir o janela de upload, visto que seria necessário rescrever os conectores, criar novos views e controllers. Quando eu tiver um tempo, pretendo criá-los, mas não acho que dessa forma seja “gambiarra”, só estou usando um plugin. :D


Ps².: Dentro das pastas do CKEditor e do CKFinder tem algumas coisas que podem ser eliminadas, como pasta de samples e conectores de outras linguagens.

    • sankaran
    • março 4th, 2011 5:15am

    Thanks i was searching for this a whole day thanks.

    • Rafael Gutierres
    • maio 11th, 2011 12:41am

    Valeu amigão!! Suas dicas foram preciosas.

    • bruno
    • junho 14th, 2011 3:30pm

    Boa iniciativa.
    Faltou, porém, vc mostrar a estrutura de pastas do seu C.I. Onde vc colocou a pasta do CKEditor e FCKEditor.

    • Marcelo
    • junho 14th, 2011 4:44pm

    Bruno,
    No texto eu digo que coloquei-os na minha pasta de JS, e no último exemplo de código você pode ver que eu faço referências a tal diretório. Mas o CI é indiferente quanto a pasta usada para seus Javascripts e não há nenhum requisito para o CKEditor/CKFinder já que todos os paths são configuráveis.

    Se tiver alguma dúvida específica, só postar.

    • Bruno
    • junho 14th, 2011 4:59pm

    Obrigado Marcelo,

    Verifiquei o caminho (js) e o exemplo funcionou.
    Valeu.

    • Alex Mello
    • julho 4th, 2011 12:02pm

    Marcelo uma dúvida estou usando o CI 2.0.2.
    A minha estrutura está assim

    /application
    /system
    /assets
    /ckeditor
    /ckfinder

    Não sei por qual motivo mas ele não aparece o “toolbar” na minha view, daria para usar isto no CI 2.0.2, tenho que mudar algo na estrutura ?

    grato

    • Marcelo
    • julho 11th, 2011 6:49pm

    @Alex Mello
    Alex, imagino que seja alguma incoerência nos caminhos dos arquivos. Recomendo que você cheque isso a fundo.
    Você pode usar o plugin para FF, Developer Tools, e conferir os caminhos de arquivos JS, por exemplo.
    Não vejo nenhum motivo para o CKEditor não funcionar em diferentes versões do CI, já que é puramente JS.

  1. Marcelo, fiz todas as configurações necessárias, só que o ckfinder não encontra a pasta das imagens … tem que configurar em outro lugar fora o config.php? Estou usando Code 2.0.2 e as pastas estão com permissão 7777.

    • Marcelo
    • julho 22nd, 2011 3:02am

    @Wladymir, não sei como está sua organização de diretórios, mas eu prefiro sempre manter imagens, css, js e outros recursos fora do “alcance” da reescrita de url do CI. As únicas configurações que eu fiz foram no config.php(do CKFinder) e no array de configuração (no controller), que é passado para o helper.

    • Daniel
    • agosto 3rd, 2011 5:45pm

    Tem como configurar via controller quais paletas da toolbar ficarão visíveis no editor que será carregado posteriormente na view? Se tiver me mostre como. Obrigado.

    • Marcelo
    • agosto 3rd, 2011 6:48pm

    Sim, tá no final do post:
    'config' => array
    (
    'toolbar' => "Full",
    ...
    )

  2. Olá marcelo, estou com problemas

    my ckeditor esta nromal, mais o ckfinder não ta funcionando direito,
    qnd eu upo uma imagem, ele nao funciona e retorna um erro 404

    404 Page Not Found
    The page you requested was not found.

    Da uma olhada no print que tirei:

    http://n2kinformatica.com.br/print.jpg

    • Alex
    • outubro 31st, 2011 11:27am

    comigo funcionou assim,

    > Application
    > System
    > Arquivos >> ckeditor >>> ckfinder

    é so trocar o endereço dos PAth

    ‘path’ => ‘arquivos/ckeditor’,

  3. Hi Guys,

    thanks you u all for your time.
    I have already implement the ckeditor by last tutorial.
    I have seen it is good tutorial.But i am facing the pronblem as it is not in engilsh.Can any one help me to show inglish.

    My folder system li

  4. my folder system is like as bellow.

    application
    asset
    system
    index.php

    Any help will big for me.

    thanks you all guyes.

    Many many happy return for the new year 2012.
    Judhisthira

    • Batyer
    • janeiro 31st, 2012 3:12pm

    Marcelo,

    Estou implementando.
    Contudo, está acontecendo o seguinte erro, quando clico no botão “Localizar imagem”.

    “Não foi possível carregar a resposta XML enviada pelo servidor.
    Em um documento XML só são permitidos elementos de nível superior.”

    A estrutura da pasta: js/ckeditor/ckfinder.
    Sendo estas fora do codeigniter, ou seja, fora da pasta apllication.

    • GilcierWEb
    • maio 10th, 2012 6:21pm

    o erro falado nos comentários é erro de caminho do ckfinder.
    ‘filebrowserBrowseUrl’ => base_url().’system/application/js/ckeditor/ckfinder/ckfinder.html’,
    ‘filebrowserImageBrowseUrl’ => base_url().’system/application/js/ckeditor/ckfinder/ckfinder.html?Type=Images’,
    ‘filebrowserFlashBrowseUrl’ => base_url().’system/application/js/ckeditor/ckfinder/ckfinder.html?Type=Flash’,
    ‘filebrowserUploadUrl’ => base_url().’system/application/js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files’,
    ‘filebrowserImageUploadUrl’ => base_url().’system/application/js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images’,
    ‘filebrowserFlashUploadUrl’ => base_url().’system/application/js/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’

    repare que o ckfinder está dentro da pasta ckeditor
    js/ckeditor/ckfinder/ckfinder.html?Type=Images errado
    js/ckfinder/ckfinder.html?Type=Images certo
    eu resolvir desse jeito.
    eu não tinha colocado a pasta do ckfinder dentro da pasta ckeditor
    acho que o problema falado é esse.

    • Vitor Odenor Aquino da Silva
    • junho 11th, 2012 8:05am

    Meu amigo, muito obrigado. Já estava imaginando as dificuldades de integrar o ckeditor a minha aplicação, quando encontrei seu tutorial fiquei muito tranquilo.
    Grande Abraço e mais Sucesso para você.

    • Nadson Cs
    • outubro 17th, 2012 11:19am

    @Alex Mello
    Estou com o mesmo problema, carrega a view com o text área mais não aparece o toolbar e nem nada do CKEditor

    • Marcelo
    • outubro 19th, 2012 1:03pm

    @Nadson Cs
    Te recomendo a usar o plugin do Firefox, Web Developer Tools, no canto direito da barra, haverá 3 ícones, verificando se tem algum erro em seu markup HTML, CSS e JS, caso haja algum erro, ele marcará um X em vermelho. Diante disso acho que você consegue ver se houve algum erro de JS, configuração de PATH, etc.

    • karen
    • novembro 2nd, 2012 9:42pm

    Perfeito, deu tudo certo. Parabéns pelo post.

    • Carlos Venancio
    • novembro 14th, 2012 1:27am

    Marcelo,
    to usando o ckfinder a algum tempo com aquela mensagem de demo, porém estou com medo que o script possa parar, pois pra mim funcionou todos os recursos.
    Sabe algo sobre a licença?

    Obrigado

    • Marcelo
    • novembro 14th, 2012 10:37am

    @Carlos,

    O script provavelmente não vai parar de funcionar, mas a licença não permite projetos comerciais com a versão demo. Mais informações: http://ckfinder.com/license

    • Carlos Venancio
    • novembro 14th, 2012 11:03am

    Uso ele no meu site pessoal,
    fiquei tranquilo quanto ao funcionamento, meu medo é que ele travasse depois de um tempo de uso.

    Obg Marcelo

    • Inis Oliveira
    • dezembro 5th, 2012 4:04pm

    gostaria de saber se você sabe se tem como eu colocar uma tag de “leia mais” no ckeditor para resumir os artigos da home ?
    Obrigado!

  5. Rapaz, gênio, gênio!

    Que post excelente!
    Resolveu todas as minhas dúvidas para usar esta excelente ferramenta, de forma clara, precisa, sem enrolação.

    Magnífico! Parabéns!

    • arlenn dias pereira
    • outubro 13th, 2013 12:28am

    Valeu você me salvou depois de tantas buscas valeu mesmo…

    • AURO SILVA
    • dezembro 23rd, 2013 8:59am

    Utilizo o CKEditor para alimentar um sítio com arquivos, fotos e similares. Não estou conseguindo fazer com que o CKE faça upload de arquivo com 20MB. Isso é possível com o CKE?

    • AURO SILVA
    • dezembro 23rd, 2013 9:00am

    Utilizo o CKEditor (CKE) para inserir arquivos num sítio. Não estou conseguindo fazer com que o CKE faça upload de arquivo com 20MB. Isso é possível com o CKE?

    • Marcelo
    • dezembro 23rd, 2013 9:53am

    @Auro, não creio que seja coisa do CKE limitar o tamanho de upload, é provável que você consiga resolver isso nas configurações do PHP.
    Dá uma olhada aqui.

  6. Bom dia Marcelo.
    Uma empresa desenvolveu nosso site e instalou (não sei se é o termo correto) esse programa.
    Consigo subir imagens, arquivos e até ai tudo bem. O problema está na hora de deletar arquivos que não vou usar mais, dá mensagem de erro desconhecido.
    Tentei falar com eles e agora querem me cobrar manutenção para verificar o que pode estar errado, o que eu não acho injusto já que esse erro deveria ter sido detectado por eles na fase de testes.
    Enfim, tem alguma maneira de um leigo como eu, deletar estes arquivos ou somente uma pessoa com conhecimentos tecnicos pode fazer isso?
    Agradeço desde já.
    Atenciosamente

    • Marcelo
    • outubro 19th, 2016 10:45am

    Só se você tiver acesso às pastas onde é feito o upload.
    Primeira coisa que me passa à cabeça é que pode ser problema de permissão. O sistema rodando no seu servidor tem um conjunto de permissões de acesso à pastas e arquivos, então é bem comum esquecerem de dar permissões específicas. Mas pode ser uma miríade de coisas…

  7. @Marcelo
    Obrigado, pelo jeito então só quem fez ou sabe mexer é que poderia tirar esta dúvida.

  1. Nenhum trackback ainda.