Прикручиваем CKFinder к сайту

CKFinder - прекрасный простой в установке браузер файлов для вашего сайта. Служит он (раз он браузер файлов) как для организации выбора файлов, лежащих на сервере в форму на вашем сайте, так и для интерактивной загрузки новых файлов на сервер с вашего компьютера.

Использовать CKFinder можно как самостоятельно, так и в составе CKEditor - прекрасного и простого редактора текстов для административной части сайта. Скачать демо версию можно здесь. Как из демо-версии сделать полноценную расскажем в конце статьи. Найти и скачать CKEditor также не сложно.

Итак скачали. Распакуем. Создадим, например, в корне сайта папку CKFinder и скопируем туда содержимое распакованного архива. Содержимое этой папки должно выглядеть как-то так:


Открываем для редактирования файл config.php в этой папке. Нам нужно разрешить использование сайта. Для этого в самом конце перед
// Config must be returned - do not change it.
return $config;

вставить
$config['authentication'] = function() { return true; };
Этот вариант не самый безопасный, так как дает доступ к браузеру всем пользователям. Но эту функцию можно в дальнейшем доработать, так чтобы она возвращала true только в правильных случаях. Сейчас пока оставим так как есть.

Ближе к началу файла отыскиваем
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
...

и значение параметра baseUrl меняем на путь от корня сайта к папке, куда мы будем загружать файлы (для этого, ествественно, на сервере нужно предварительно дать к этой папке необходимые разрешения). Например, так:
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => '/public/upload/',
...

Теперь переходим к нашей форме, на которую должны выбираться файлы (например, картинка для статьи). Вставляем на форму что-то вроде этого:

<label for='picture'>Картинка</label>
<input id="picture" name="picture" type="text" value="" style="width:40%">
<button id="ckfinder-popup-1">Выбрать картинку</button><br/>

<script src="/scfinder/samples/js/sf.js"></script>
<script src="/scfinder/samples/js/tree-a.js"></script>
<script src="/ckfinder/ckfinder.js"></script>
<script>
   function img_change(){
      var img = document.getElementById("img1");
      var val = document.getElementById("picture").value;
      img.src='http://www.'+document.domain+val;
   }   var button1 = document.getElementById( 'ckfinder-popup-1' );   button1.onclick = function() {
      selectFileWithCKFinder( 'picture' );
      event.preventDefault();
   };   function selectFileWithCKFinder( elementId ) {
      CKFinder.popup( {
         chooseFiles: true,
         width: 800,
         height: 600,
         onInit: function( finder ) {
            finder.on( 'files:choose', function( evt ) {
               var file = evt.data.files.first();
               var output = document.getElementById( elementId );
               output.value = file.getUrl();        
            } );            finder.on( 'file:choose:resizedImage', function( evt ) {
                var output = document.getElementById( elementId );
                output.value = evt.data.resizedUrl;
                var img = document.getElementById("img1");
            } );
         }
    } );
}
</script>

Вот и все про использование CKFinder автономно на сегодня. Больше можно найти на сайте разработчиков.

Теперь два слова про использование с CKEditor. Скачиваем CKEditor, распаковываем в некую папку ( например ckeditor в корне сайта).

На странице, где нужен редактор вставляем в header что-то вроде этого

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

а на саму страницу:

<label for="text">Текст</label>
<textarea name="text"><?php echo $text ?></textarea><br/>
<script>
   CKEDITOR.replace( 'text', {
      filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
      filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
   } );
</script>

Этот код заменить код поля с именем "text" на полнофункциональный редактор, уже подключенный к CKFinder, что даст возможность вставлять в редактре интерактивна картинки.

Теперь, как обещал, как сделать из демо-версии полнофункциональную. Об этом можно прочитать здесь.