Замена редактора summernote в Opencart 2.0.x на tinymce с интегрированным Responsive FileManager


Рубрика: Opencart -> Создание сайта -> Блог
Метки: | | | | |
Просмотров: 9600
Замена редактора summernote в Opencart 2.0.x на tinymce с интегрированным Responsive FileManager

В предыдущей статье я рассказал, как заменить убогий редактор summernote в Opencart 2 на более продвинутый, удобный и правильный Tinymce 4. Но тот способ несколько ограниченный ввиду простоты загрузчика картинок, который мы прикрутили. Теперь я расскажу как прикрутить к Opencart 2 тот же Tinymce, но уже интегировать в него продвинутый менеджер файлов responsivefilemanager 9 (вот здесь его демо и описание: http://www.responsivefilemanager.com)

Как заменить редактор summernote вручную в Opencart на Tinymce?

Сразу оговорюсь: рассказанный ниже способ рабочий, но трудоёмкий и неправильный. Файлы правятся вручную, изменяются системные файлы и при обновлении Opencart  вся работа насмарку, и всё придётся делать заново. Правильный способ - ЭТО СОЗДАНИЕ РАСШИРЕНИЯ OCMOD. Тогда редактор устанавливается одним нажатием и НИКАКИЕ файлы не перезаписываются. Я создал расширение editor_Tinymce_responsivefilemanager.ocmod для личного пользования. Если есть желание, то можете приобрести его у меня

Стоимость модуля для Opencart 2 editor_Tinymce_responsivefilemanager.ocmod 350 рублей.

Пишите на странице КОНТАКТЫ или в комментариях в статье.

Ну а кому денег жалко (ехидный смех), то делайте руками.

 

Итак,  Скачиваем редактор по ссылке  http://www.tinymce.com/download/download.php  вариант с jquery и там же берём русский язык. В архиве с редактором папка tinymce, а в ней папка js, а в ней папка tinymce. Вот эту последнюю и извлекаем в папку нашего сайта ВашСайт \admin\view\javascript

 Русский язык кладётся в ВашСайт\admin\view\javascript\tinymce\langs

Идём в папку ВашСайт\admin\view\template\common и находим файл header.tpl В нём 20-я строка упоминает summernote. Вот после неё и вставим такой код:

<script type="text/javascript" src="view/javascript/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="view/javascript/tinymce/tinymce.min.js"></script>

Настройка responsivefilemanager для работы с Tinymce 4 в магазине Opencart 2

Теперь идём на сайт http://www.responsivefilemanager.com/ и качаем файловый менеджер. Дальше очень внимательно: из скачанного архива папку filemanager кидаем в корень сайта, папку tinymce кидаем в   Ваш сайт \admin\view\javascript    Идём опять в корень сайта, в папку image и создаём там папку thumbs, там менеджер создаст миниатюры. Собственно, всё готово. Осталось заменить вывод редактора. Где Вам нужен редактор? Скажем, если в описании товара, то Вам нужен файл product_form.tpl в папке по пути ВашСайт\admin\view\template\catalog

Решайте сами. Я же возьму information_form.tpl , это информационные страницы (статьи)

Ищем такое внизу (примерно строки 209-215)

  <script type="text/javascript"><!--
<?php foreach ($languages as $language) { ?>
$('#input-description<?php echo $language['language_id']; ?>').summernote({
    height: 300
});
<?php } ?>
//--></script>

И вместо этого вставляем это:

  <script type="text/javascript"><!--
<?php foreach ($languages as $language) { ?>
$('#input-description<?php echo $language['language_id']; ?>').tinymce({
    selector: "textarea#elm1",
    theme: "modern",
    language:"ru",
    width: 800,
    height: 300,
    plugins: [
         " advlist autolink link image lists charmap print preview hr anchor responsivefilemanager pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor link image   "
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons  responsivefilemanager",
   external_filemanager_path:"/filemanager/",
   filemanager_title:"Responsive Filemanager" ,
   external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
 });
<?php } ?>
//--></script>

Осталось настроить менеджер файлов. Идём в корень сайта, находим папку filemanager/config и открываем файл config.php

  • 4-я строчка date_default_timezone_set('Europe/Rome'); - можно сменить на свою временную зону
  • 69-я строка 'upload_dir' => '/source/',   заменяем на 'upload_dir' => '/image/',  (это папка для загрузки наших картинок и файлов)
  • 79-я строка 'current_path' => '../source/', заменяем на 'current_path' => '../image/',
  • 90-я строка     'thumbs_base_path' => '../thumbs/', заменяем на 'thumbs_base_path' => '../image/thumbs/',     (созданную нами папку для превьюшек)
  • можете также сменить ключи в строках 261 и 262, а можете не менять, они шифруются.

И ВНИМАНИЕ! Если Вы копируете из моего текста выше, то копируйте вместе с запятыми после кода, это не пунктация, а ЧАСТЬ КОДА.Будьте уж внимательны, пожалуйста.

Ну вот и всё. Пробуйте.

Как я уже говорил, способ ручной и неправильный, но рабочий. За правильным OCMOD- модулем обращайтесь. К слову говоря, в модуле ещё есть кое-что, о чём я не рассказал в этой статье, а именно всё более безопасно и удобно.

А устав от этого нудного програмирования, послушайте хорошую музыку. Я под неё и писал свой модуль редактора Tinymce+responsivefilemanager для Opencart 2

 

 

Комментариев: 4 RSS

Привет! Твой модификатор заменяет summernote только в самом движке, а в модулях он остаётся? Или и в модулях тоже?

В готовом ocmod, я так понимаю, имеется ввиду? Я заменяю в страницах ИНФО, ПРОДУКТ, КАТЕГОРИЯ ПРОДУКТОВ, модуль HTML, КОНТАКТЫ. А так можно прописать за 10 сек. в любом, всего-то пару строчек кода.

Геннадий4
2017-05-07 в 20:13:51

Здравствуйте!

А какой версии Вы используете редактор?

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)