Установка CKEditor на Codeigniter и настройка загрузки изображений

При работе над очередным сайтов появилась необходимость установить хороший визуальный редактор с поддержкой быстрой загрузки изображений. Выбор пал на CKEditor, так как заявленная функциональность вполне устроила, да и прежнюю версию под именем «FCKeditor» я как то ставил уже в одном из своих работ. После поисков в интернете и изучения различных инструкций всё-таки удалось внедрить этот визивик на сайт. В этом посте расскажу как установить визуальный редактор CKEditor при использовании фреймворка Codeigniter.

Процесс установки:

1. Скачиваем архив CKEditor c http://ckeditor.com/download распаковываем и кидаем в корневую папку где установлен Codeigniter. У меня получилось вот такой листинг:

/application/
/ckeditor/
/images/
/system/
/.htaccess
/index.php


2. Затем создаем библиотеку с названием ckeditor.php в папке фреймфорка application/libraries
Получится application/libraries/ckeditor.php
В файл application/libraries/ckeditor.php копируем содержимое файла ckeditor/ckeditor_php5.php
Содержимое этого файла это готовый класс CKEditor, изменения в который можно не вносить — он уже рабочий.

3. Чтобы загрузить созданную библиотеку в контроллере (controllers) приложения, пишем стандартный код

$this->load->library('ckeditor'); // загружаем библиотеку
$this->CKEditor = new CKEditor('/ckeditor/'); // указываем путь к папке редактора.
$this->CKEditor->textareaAttributes = array( "rows" => 8, "cols" => 60, "id" => "message" ); // атрибуты текстового поля (можно не заполнять)

4. Чтобы вызвать редактор в файле отображения (views) вместо тега textarea вставляем

<?php $this->CKEditor->editor("message"); ?>

Данный php код вставит в html код нечто вроде

<textarea name="message" rows="8" cols="60"></textarea><script type="text/javascript">// <![CDATA[
 window.CKEDITOR_BASEPATH='/ckeditor/';
// ]]></script><script type="text/javascript" src="/ckeditor/ckeditor.js?t=B8DJ5M3"></script><script type="text/javascript">// <![CDATA[
 CKEDITOR.replace('message', {"toolbar":"Full"});
// ]]></script>

и появится визуальный редактор.

5. Чтобы путь к папке /ckeditor/ не перехватывался фреймфорком нужно поправить файл .htaccess и внести в него правило для этой папки. У меня этот файл выглядит вот так:

AddDefaultCharset UTF-8
RewriteEngine on
RewriteCond $1 !^(index\.php|images|ckeditor|robots\.txt)
RewriteRule ^(.*)$ ./index.php/$1 [L]

это значит всё кроме указанных правил обрабатывается через index.php и передает фреймворку.

Загрузка изображений (файлов) в CKEditor:

По умолчанию этот визуальный редактор не загружает изображения и в нем эта возможность скрыта. Однако заставить его загружать изображения непосредственно в браузере не сложно. Для этого нужно сделать несложные действия:

1. Идем в папку /ckeditor/plugins/image/dialogs/image.js, находим строчку id:'Upload',hidden:true и меняем ее на id:'Upload',hidden:false
После этого сохраняем файл и смотрим в диалогов окне вставки изображения появится новая вкладка «Загрузить». Но файл загрузить нам еще не удастся, так как нужно позаботиться о скрипте, который это сделает.

2. В контроллере вашего приложения создаем функцию (метод) ckupload(). У меня контроллер назывался Adminka в нем я создал функцию ckupload вот с таким содержимым:

function ckupload()
{
$callback = $_GET['CKEditorFuncNum'];
$file_name = $_FILES['upload']['name'];
$file_name_tmp = $_FILES['upload']['tmp_name'];
$file_new_name = FCPATH.'/images/upload/'; // серверный адрес - папка для сохранения файлов. (нужны права на запись)
$full_path = $file_new_name.$file_name;
$http_path = '/images/upload/'.$file_name; // адрес изображения для обращения через http
$error = '';
if( move_uploaded_file($file_name_tmp, $full_path) )
{
// можно добавить код при успешном выполнение загрузки файла
} else
{
$error = 'Ошибка, повторите попытку позже'; // эта ошибка появится в браузере если скрипт не смог загрузить файл
$http_path = '';
}
echo "<script type="text/javascript">// <![CDATA[
window.parent.CKEDITOR.tools.callFunction(".$callback.",  \"".$http_path."\", \"".$error."\" );
// ]]></script>";
}

3. Чтобы редактор при загрузке изображения обращался к этой функции, открываем файл /ckeditor/config.js и добавляем в него одну строчку с настройкой config.filebrowserUploadUrl
После изменения этот файл должен быть похож на что-то вроде:

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserUploadUrl = '/adminka/ckupload';
};

Так как у меня контроллер имеет название adminka и функция ckupload, значение config.filebrowserUploadUrl будет равно /adminka/ckupload/
Это настройка зависит от того, как у Вас будет называться контроллер и метод.

Вот и всё. Думаю не сложно. Но если появятся вопросы — пишите комментарии к посту. Постараюсь помочь.

На правах рекламы: любите азартные игры? тогда посетите игровой клуб — огромный выбор игр и развлечений на любой кошелек — всё доступно через интернет в режиме онлайн!