Прикручиваем elFinder к CKEditor в Yii

Сейчас прикручивал к WYSIWYG редактору CKEditor файловый менеджер elFinder, т.к. дефолтный файловый менеджер для CKEditor платный. И по горячим следам решил написать заметку как это делать, потому что не так и не нашел внятного описания как же это сделать.

Для подключения CKEditor, я использовал расширения из yiiext. Скачиваем его и кладем его в папку с расширениями. У меня получилось:

application.extensions.ckeditor

Теперь создаем в этой папке, папку assets и кладем туда файлы самого WYSIWYG редактора CKEditor, которые скачиваем с официально сайта. Но виджет отказался запускаться из коробки. Чтобы он заработал открываем файл ECKEditor.php идем на строку 69 и меняем:

private $skin='kama';

на

public $skin='kama';

Дальше функция setLanguage($value), меняем:

if(isset($this->allowedLanguages[$language]))
    $this->language=$language;

на

if(isset($this->allowedLanguages[$lang]))
    $this->language=$lang;

Теперь виджет рабочий и его можно подключать в нужно месте:

<?php $this->widget('application.extensions.ckeditor.ECKEditor', array(
        'model'=>$model,
        'attribute'=>'content',
        'language'=>'ru',
        'editorTemplate'=>'full',
)); ?>

Надеюсь к моменту, когда эту заметку кто-то будет читать, ему не надо будет вносить изменения в код виджета.

Теперь будет прикручивать elFinder. Я использовал расширение опять же из yiiext. Скачиваем его и кладем в папку с расширениями. У меня это выглядит так:

application.extensions.elfinder

Здесь так же создаем папку assets и складываем туда папки css, js, images из архива elFinder скаченного с их сайта.

Теперь в контроллере, который у нас будет работать с загрузкой файлов, необходимо добавить в метод actions() следующие:

public function actions() {
    return array(
        'fileManager'=>array(
            'class'=>'application.extensions.elfinder.ElFinderAction',
         ),
    );
}

Создаем сам экшен:


public function actionBrowse() {
    // я создал специально отдельный пустой лейаут
    $this->layout='//layouts/clear';
    $this->render('browser');
}

Отображение:

<?php
$this->widget('application.extensions.elfinder.ElFinderWidget',array(
    'lang'=>'ru',
    'url'=>CHtml::normalizeUrl(array('site/fileManager')),
    'editorCallback'=>'js:function(url) {
        var funcNum = window.location.search.replace(/^.*CKEditorFuncNum=(\d+).*$/, "$1");
        window.opener.CKEDITOR.tools.callFunction(funcNum, url);
        window.close();
    }',
))?>

В подключение виджета ECKEditor, добавляем:

        'options'=>array(
            'filebrowserBrowseUrl'=>CHtml::normalizeUrl(array('controllerId/browse')),
        ),

controllerId — ваш контроллер в котором находится экшен browse.
Осталось последние, в корне, паблик части, создаем папку upload и на этом все. Пользуемся.

Надеюсь эта заметка кому-то сэкономит его время.

P.S. Да, и главное не забудь раставить права на доступ.