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

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

На момент написания этого поста
версия Codeigniter 2.0.2 (скачать можно тут http://codeigniter.com/)
версия CKEditor 3.6.2 (скачать можно тут http://ckeditor.com/)

 

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

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) приложения, пишем стандартный код

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

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

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

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 вот с таким содержимым:

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

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

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


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


Если Вам интересны темы, про которые я пишу в своем блоге, то Вы можете Подписаться на обновления. Подписываться на новости и обновления можно по емайл или через популярные сервисы yandex и google!

Эта запись была опубликована в рубрике PHP кусочки, Полезное для w мастеров и отмечена метками , . Добавить в закладки ссылку.

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

  1. Сергей пишет:

    Автор, проверяй свои статьи?!?!
    Посмотри пункт — «4. Чтобы вызвать редактор в файле отображения (views) вместо тега textarea вставляем». там пусто!!!! Какой код вставлять не понятно!

    • FaNiska пишет:

      Исправил, спасибо. Только просьба вести себя повежливей и «поадекватней». Это вордпресс вырезал тег при многократном сохранении.

  2. Денис пишет:

    $this->CKEditor->textareaAttributes = array( «rows» =>; 8, «cols» => 60, «id» => «message» ); // атрибуты текстового поля (можно не заполнять) — вот в этой вот строчке мне кажется маленькая опечатка

  3. Glafir пишет:

    Отлично!!! Автору РЕСПЕКТИЩЕ!!!
    Всё заработало, по моему одна из немногих статей грамотно написанных.

  4. Glafir пишет:

    Вот оно то работает. Только, если передавать данные через ajax.form(), то в файерфоксе со второго раза передаются,в хроме такая же фигня, в IE 8 всё нормально. Подскажите, как починить?
    Нашёл решение вот тут., но что-то не запахало, в упор не хочет с первого раза брать данные с CKEditor`a.

  5. La2ha пишет:

    Спасибо, полезно очень)

  6. La2ha пишет:

    и в четверной версии нету id:’Upload’,hidden:true вместо этого там написано id:’Upload’,hidden:!0

    • FaNiska пишет:

      Если вы скачаете не сжатые исходники, то увидете, что там этот пункт меняется также.

      • Наташа пишет:

        Я к сожалению не поняла что делать с «id:’Upload’,hidden:!0» и где эти несжатые исходники.
        Если можно поподробнее, никак не могу заставить редактор отображать кнопку «Выбор на сервере».

        • FaNiska пишет:

          А Вы уверены, что используете ту же версию CKEditor, которая указана в посте моего блога? В четвертой версии этого редактора, там немного по другому это устроено.

  7. Виталий пишет:

    Автор большое тебе спасибо! Несколько дней потратил на поиск редактора с загрузкой к себе на сервер!
    Но вот возникла проблемка небольшая. После загрузки изображения на сервер (изображение загружается есть в папке) в редакторе пишет «Загрузить на сервер»… Как узнать какой url у этого изображения?

    • FaNiska пишет:

      Если память не изменяет, то урл изображения должен вставляться автоматически после загрузки изображения. Так как после загрузки вызывается callback функция, чтобы редактор подхватил урл адрес картинки. Проверьте, все ли правильно Вы сделали.

      • Виталий пишет:

        Спасибо разобрался…
        В строке $http_path = ‘/images/upload/’.$file_name; // адрес изображения для обращения через http
        Добавил base_url()….
        Все заработало!
        ЗЫ: Можно поинтересовать… Вы до сих пор создаете проекты на CI или используете другой фреймворк?

        • FaNiska пишет:

          Да, я использую Codeigniter.
          Так как его возможностей пока хватает для реализации задуманного.

  8. Виталий пишет:

    И еще вопросик: Я раньше выводли текстовое поле так , при неправильном заполнение форма перезагружалась и текст сохранялся… Куда мне пихнуть сет_валуе теперь?

    • Виталий пишет:

      И здесь разобрался … при вызове редактора отправил set_value(‘description’) вторым параметром….
      ЗЫ: Не могу нарадоваться, что теперь нормальный редактор пашет как я хотел….

  9. Валерий пишет:

    Объясните пожалуйста новичку что такое контроллер. Это файл на котором расположено то текстовое поле, в котором вводятся данные через ckeitor?

  10. Игорь пишет:

    Для новых версий CKEDITOR

    1)ищите в /ckeditor/plugins/image/dialogs/image.js
    id:»Upload»,hidden:!0
    исправляйте на
    id:»Upload»,hidden:0

    2) все остальное то-же самое, кроме контроллера
    он должен иметь такой код:
    function ckupload()
    {
    $callback = $_GET[‘CKEditorFuncNum’];
    $file_name = $_FILES[‘upload’][‘name’];
    $file_name_tmp = $_FILES[‘upload’][‘tmp_name’];
    $file_new_name = FCPATH.’/img/upload/’; // серверный адрес — папка для сохранения файлов. (нужны права на запись)
    $full_path = $file_new_name.$file_name;
    $http_path = ‘/img/upload/’.$file_name; // адрес изображения для обращения через http
    $error = »;
    if( move_uploaded_file($file_name_tmp, $full_path) )
    {
    // можно добавить код при успешном выполнение загрузки файла
    } else
    {
    $error = ‘Ошибка, повторите попытку позже’; // эта ошибка появится в браузере если скрипт не смог загрузить файл
    $http_path = »;
    }
    echo «window.parent.CKEDITOR.tools.callFunction(«.$callback.»,\»».$http_path.»\», \»».$error.»\» );»;
    }

    Все. у меня работает на 4 версии CKEDITOR и CI 2.1.3

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *