Всё о web

Для чайников и не только


Подключение ckeditor к opencart 2

Май 8, 2015

В угоду модному bootstrap разработчики опенкарта сменили текстовый редактор. Теперь во второй версии опенкарта используется summernote, который несравним по возможностям с ckeditor. Для того чтобы подключить ckeditor к opencart 2 делаем следующее:

Скачиваем ckeditor и распаковываем его в /admin/view/javascript/

Отключаем summernote, заходим в /admin/view/template/common/header.tpl и удаляем строчки:

<link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>

Тут же подключаем ckeditor, добавляем:

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

Затем заходим в /admin/view/template/catalog/product_form.tpl, находим строчку:

$('#input-description<?php echo $language['language_id']; ?>').summernote({height: 300});

И меняем её на:

CKEDITOR.replace( 'input-description<?php echo $language['language_id']; ?>' );

Далее нам нужно подключить файлменеджер, иначе мы не сможем добавлять изображения к тексту. Скачиваем kcfinder и распаковываем его в корень сайта в папку /kcfinder.

Открываем конфиг /kcfinder/conf/config.php, в секции

// GENERAL SETTINGS

    'disabled' => true,
    'uploadURL' => "upload",
    'uploadDir' => "",
    'theme' => "default",

Меняем на

// GENERAL SETTINGS

    'disabled' => false,
    'uploadURL' => "/image/catalog",
    'uploadDir' => "../image/catalog",
    'theme' => "default",

После этого пробуем открыть страницу http://Ваш-сайт/kcfinder/. Если всё сделано правильно, должен открыться менеджер файлов.

Теперь нам нужно закрыть доступ к менеджеру файлов неавторизованным пользователям. В самом верху конфига добавляем:

session_start();
if(!isset($_SESSION['user_id']))die('');
if($_SESSION['user_id']!=1)die('');

Если Вы работаете не от админа, созданного при установке opencart, то в строчке

if($_SESSION['user_id']!=1)die('');

вместо "1" нужно подставить Ваш id пользователя. Более красивую проверку прав отложим на будущее. Далее нужно научить ckeditor пользоваться менеджером файлов. Открываем конфиг: /admin/view/javascript/ckeditor/config.js

Дописываем функцию:

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
   config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
   config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
   config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';
   config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
   config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
   config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';
};

Проверяем работоспособность: заходим в редактирование товара и пробуем добавить изображение. Если всё сделали правильно, в меню выбора изображения появится кнопка "Выбор на сервере", по клику на которую откроется менеджер файлов. В случае если при загрузке файла появляется ошибка "Unnown error", тогда в файле: /kcfinder/core/clas/browser.php в функции protected function postDir($existent=true) нужно закомментировать или удалить 2 строчки:

        if (!$this->checkFilePath($dir))
            $this->errorMsg("Unknown error.-");

Теперь осталось подключить эдитор к остальным страницам. Заходим в каждый шаблон и меняем строчку:

$('#input-description<?php echo $language['language_id']; ?>').summernote({
	height: 300
});

На

CKEDITOR.replace( 'input-description<?php echo $language['language_id']; ?>' );



Комментарии

17 комментариев | “Подключение ckeditor к opencart 2

  1. Аватар Алина:

    Здравствуйте. Помогите, пожалуйста с ошибкой, после нажатия на кнопку Выбор на сервере появляется окно с сообщением: session_start(); if(!isset($_SESSION[‘user_id’]))die(»); if($_SESSION[‘user_id’]!=1)die(»);
    Warning: Cannot modify header information — headers already sent by (output started at C:\OpenServer\domains\new-site\kcfinder\conf\config.php:4) in C:\OpenServer\domains\new-site\kcfinder\core\class\browser.php on line 112

    Warning: Cannot modify header information — headers already sent by (output started at C:\OpenServer\domains\new-site\kcfinder\conf\config.php:4) in C:\OpenServer\domains\new-site\kcfinder\core\class\browser.php on line 113
    ЗагрузитьОбновитьУстановкиРазвернутьО скрипте

    1. Илья Илья:

      Если перевести на русский, это значит: «Редирект не может быть выполнен, так как хэдер уже был послан в файле C:\OpenServer\domains\new-site\kcfinder\conf\config.php на строке 4.» Этот файл послал на вывод какую-то информацию. Какую не знаю, ищите. В норме конфиг ничего не посылает, что-то Вы сделали неправильно.

  2. Аватар Roman:

    Добрый день!
    После внесения всех правок ckeditor не отображается, ошибок не выдает.
    Версия OpenCart 2.0.3.1

  3. Илья Илья:

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

  4. Аватар Roman:

    Сайт с темой Journal 2.5.4

  5. Аватар Андрей:

    «Теперь осталось подключить эдитор к остальным страницам. Заходим в каждый шаблон и меняем строчку…»
    Можно путь к шаблонам написать?

  6. Аватар maxvik:

    я честно говоря не увидел что это только для чистого опенкарта, у меня русская сборка 2101, сделал все как написано до пункта «После этого пробуем открыть страницу http://Ваш-сайт/kcfinder/. Если всё сделано правильно, должен открыться менеджер файлов.»
    появляется ошибка 404. в админке редактор не изменился ни в товарах ни в статьях

  7. Аватар Тарас:

    Добрый день, прошу помощи.

    Кнопка выбор на сервере так и не появляется.( Вроде все по инструкции…

    Возможно
    config.filebrowserBrowseUrl = ‘/kcfinder/browse.php?opener=ckeditor&type=files’;
    config.filebrowserImageBrowseUrl = ‘/kcfinder/browse.php?opener=ckeditor&type=images’;

    В коде может изменения произошли по подмене. Куда капнуть(?

    1. Аватар Андрей:

      Модификаторы обновляли?

  8. Аватар Андрей:

    У меня все работает, но в файловом менеджере не отображаются файлы, чувствую что проблема в ‘disabled’ => false,
    ‘uploadURL’ => «/image/catalog/»,
    ‘uploadDir’ => «../image/catalog/»,
    ‘theme’ => «default»,
    но не могу понять в чем именно

  9. Аватар Deep:

    что менять тут?

    <textarea name="product_description[][description]» placeholder=»» id=»input-description» class=»form-control summernote»>

    1. Илья Илья:

      Именно тут — ничего.

  10. Аватар Владимир:

    Автор, ёп…. почему на последнем этапе нет уточнений?
    «Теперь осталось подключить эдитор к остальным страницам. Заходим в каждый шаблон и меняем строчку:» — где именно? столько времени потрачено впустую, ничего не появилось…

    1. Аватар Yura:

      Находим строки в файлах где используется редактор:
      пути:
      admin/view/template/catalog/product_form.tpl
      admin/view/template/catalog/category_form.tpl
      admin/view/template/catalog/information_form.tpl
      admin/view/template/catalog/information_form.tpl
      admin/view/template/sale/contact.tpl
      admin/view/template/module/welcome.tpl
      admin/view/template/setting/store.tpl

  11. Аватар Марианна:

    у меня вообще открывается белая страница без ошибки при выборе картинки на сервере. что делать? спасибо.

  12. Аватар Марианна:

    не открывается из-за этих строк

    session_start();
    if(!isset($_SESSION[‘user_id’]))die(»);
    if($_SESSION[‘user_id’]!=1)die(»);

    нужно другое решение для скрытия папки с глаз долой

  13. Илья Илья:

    Это самое простое решение. Нужно разобраться почему сессии не работают.

Comments are closed.