"Debugar é viver"

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.

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.

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.


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.