Редактор tinymce 4.1.x для Opencart 2


Рубрика: Opencart -> Блог
Метки: | |
Просмотров: 9046
Редактор tinymce 4.1.x для Opencart 2

Здравствуйте! В этой статье я хочу рассказать об интеграции редактора tinymce в Opencart 2. И хотя на момент написания этого опуса версия  Opencart на официальном сайте 2.0.1.1, а рекомендации многочисленных сообществ использовать предыдущую стабильную версию opencart-1.5.6.4,  у которой множество доработок, дополнений, мануалов. Но время не стоит на месте и рано или поздно переходить на новую версию придётся. По крайней мере мы уже сделали на ней корпоративный сайт и результатами довольны.

Итак, Opencart 2. После установки и пробного тыканья выясняется, что установленный в предыдущих версиях ckeditor исчез и появился редактор summernote. Почему разработчик взял именно его – загадка, наверно из-за его релативности или бутстрапности (верх безграмотности, да? Не знаю, как по-другому выразиться) Однако редактор какой-то холощёный, ограниченный. Ну кому хватает его, пожалуйста, пользуйтесь. А лично мне, для написания информационных страниц он явно не подходит. Картинки, вроде, удобно вставлять, а размер их только в трёх вариантах. Не говоря уж о странном форматировании, когда вдруг весь абзац становится заголовком.

редактор summernote

                                                                                      редактор summernote

 

     tinymce интеграция в Opencart 2

        

                                                                                                                                редактор tinymce 4.1.x

Вот я и хочу рассказать, как заменить summernote на известный и очень неплохой редактор tinymce 4. Сделаем мы это не очень грамотно, зато просто и работоспособно. Готового решения я не дам, просто расскажу как.

И давайте так, всё что я выделил, Вы читаете ДВА раза и запоминаете, чтобы потом не ныть и переспрашивать. Делаем BackUp ( бэкап) подпапки view в папке admin. Всё,  что Вы делаете, запоминайте или записывайте. Ведь когда выйдет обновление Opencart, новые файлы перезапишут Ваши изменения и всё придётся сделать заново. Мы с Вами изменим 2 файла, т.к. я хочу заменить редактор только для Информационных страниц, в остальных (страницах редактирования товаров, категорий и т.д.) оставлю summernote. По аналогии Вы можете сделать там, где Вам это нужно.

 Скачиваем редактор по ссылке  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>
 

 Что касается summernote (строки 19 и 20), то его мы не удаляем (см. выше почему)

Затем идём в каталог ВашСайт\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 pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
   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>

Ну вот , обновите страницу редактирования Информации о магазине в админке и Вы увидите в качестве редактора уже tinymce. Собственно, Вы можете сконфигурировать редактор по своему вкусу. Как видим строки language:"ru", width: 800, height: 300, отвечают за язык интерфейса, ширину и высоту окна редактора. Блок  

   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",

это кнопки на панели редактора. Поищите в интернете мануалы или готовые раскладки и можете изменить так, как Вам удобно.

Пробуем редактировать, видим как всё удобно. Но… Нет загрузки изображений. Давайте приделаем загрузчик. По ссылке http://justboil.me или сразу на гитхабе https://github.com/vikdiesel/justboil.me- находим простенький такой загрузчик, его и приделаем. Скачиваем justboil.me-master.zip и распаковываем в папку по пути ВашСайт\admin\view\javascript\tinymce\plugins

А распаковав, переименуем в jbimages. Теперь открываем опять файл information_form.tpl и в том коде внизу добавляем плагин в список плагинов tinymce и кнопку на панель редактора. (Просто слово jbimages в plugins и toolbar  добавляем) Или вот Вам уже обновлённый код:

  <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: [
         "jbimages advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons jbimages",
   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>

 Осталось прописать пути к папке, куда будут загружаться наши картинки и файлы. Можно сделать папку прямо в корне сайта, но лучше давайте в папке image, где все картинки товаров хранятся. Так и назовём её: userfiles

Дальше открываем файл конфига загрузчика по пути ВашСайт\admin\view\javascript\tinymce\plugins\jbimages с названием config.php и находим строку 41:

$config['img_path'] = '/images'; // Relative to domain name
 

Вписываем нашу папку и получаем:

$config['img_path'] = '/image/userfiles'; // Relative to domain name

В общем всё. Критики не надо, а вопросы пожалуйста. Вариант рабочий.

 Внимание! Как-то я прошляпил и сейчас исправляюсь. Статья писалась, когда был актуален Opencart 2.0.1.0 В более поздних работать скорее всего не будет. Если уж так нужно, нарисую, как приделать tinymce. А так пользуйтесь Ocstore, там дела лучше обстоят.

 

 

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

А как саму кнопку Upload перевести и содержимое загрузчика?Русский язык вроде есть,но не подхватывается...

Даже не могу вот так с налёту сказать в чём у Вас проблема. Всё по-русски должно быть

А какой файл нужно подправить, чтоб впилить редактор в карточку товара. меняю product_form не помогает.

После проделанных манипуляций summernote исчез, а tinymce не появился.

Причем исчез во всех схемах дизайна,не только в information

После проделанных манипуляций summernote исчез, а tinymce не появился.

Причем это во всех схемах дизайна,не только в information

Статья писалась под Opencart 2.0.1.0, под более поздние работать не будет. Вышел Ocstore, там есть для выбора CKeditor. tinymce конечно лучше, но смысла ещё один приделывать редактор нет.

На версии 2.1.0.1 работает, но для этого я добавила в header.tpl ещё такую строку

и редактор сразу появился

Ну да, спасибо Елена. Я больше не смотрю этот редактор по причине выхода Ocstore

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

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

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

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

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