Moushe.ru

Блог обо всём

OpenCart 2.3 Улучшение админки (1 часть)



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

  • Обновим визуальный редактор
  • Добавим в исходный код нумерацию строк и подсветку синтаксиса

Если вам интересны эти правки нажмите кнопку Читать далее.

Список задач на сегодня:

  • 1.0. Скачаем Summernote последней версии
  • 1.1. Подготовим файлы
  • 1.2. Обновим Summernote 0.8.1 (установленный в OcStore 2.3.0.2.3) до последней версии (на момент написания статьи последняя версия 0.8.6 )
  • 1.3. Настроим панель инструментов нашего редактора
  • 2. Добавим визуальный редактор и подсветку синтаксиса (исходный код)

Приступим:

1.0. Зайдём на оф. сайт производителя визуального текстового редактора: http://summernote.org/ и скачаем последнюю версию (круглая, красная кнопка).

1.1. Распаковываем скачанный нами архив, вы увидите кучу файлов и папок, не пугайтесь, нам нужна всего одна папка – dist, в ней уже собрано всё что нам нужно.

1.2. Откроем папку  ../admin/view/javascript/summernote и удалим её содержимое кроме файла opencart.js, после этого перекинем в неё содержимое папки dist.

P.S. – можно и просто заменить старые файлы новыми, но вдруг останется что-то лишнее от старой версии Summernote

Если вы не любите большого количества не нужных файлов зайдите в папку: ../admin/view/javascript/summernote/lang и удалите все неугодные вам языки, например я оставил всего 2 файла (русский, обычный и сжатый файлы).

Теперь почистим кеш нашего браузера и проверим как работает наш редактор.

Всё работает и справка показывает нам новую версию нашего редактора (на скриншоте выделено синим)

1.3. Откроем файл ../admin/view/javascript/summernote/opencart.js и вместо этой строки (18):

['font', ['bold', 'underline', 'clear']],

вставим эту:

['font', ['bold', 'italic', 'underline', 'clear']],

этим мы добавим на панель текстовых стилей кнопку italic (курсив)

а после этой строки (20):

['color', ['color']],

вставим эту:

['fontsize', ['fontsize']],

этим мы добавим в панель инструментов кнопку размер шрифта.

Ещё можно добавить кнопки вперёд – назад (отмена и повтор), хотя они иногда делают не то что нужно, но я их вставлю, а вы действуйте по собственному желанию.

Перед этой строкой (17):

['style', ['style']],

я вставляю эту:

['misc', ['undo', 'redo']],

Обязательно чистим кеш браузера!

Вот что у меня получилось:

2. Я очень часто использую режим исходного кода и мне не хватает удобной подсветки кода и нумерации строк, поэтому я  добавлю себе эти необходимые мне функции.

До:

После:

Откроем файл ../admin/view/template/common/header.tpl и перед этой строкой (22):

<link type="text/css" href="view/stylesheet/stylesheet.css" rel="stylesheet" media="screen" />

вставим эти:

<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/lib/codemirror.css">
<script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script>

Обязательно чистим кеш браузера!

Если вам не нравятся стандартные css стили, можете поработать с файлом стилей ../admin/view/javascript/codemirror/lib/codemirror.css

Результат работы:

На сегодня всё, следите за нашими новостями и до новых встреч.

2 Комментария

  1. Даниил

    05.09.2017 at 23:54

    Сделал по инструкции, но после добавления элементов во вкладке исходный код всё идёт в одну строку, каша получается

    • До обновления вообще-то тоже самое было, на основном языке нормально, на втором всё в одну строку — вопрос не ко мне 🙂

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

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

*

CAPTCHA image
*

© 2017 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика