Opencart 2.x - Улучшение Админки (1 Часть)

Тема в разделе "Модули и дополнения", создана пользователем admin, 24 авг 2017.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.595
    Симпатии:
    111.390
    Репутация:
    175
    Всем привет, обычно я делаю статьи о доработке витрины нашего сайта забывая что многих интересует повышение удобства работы с админкой, буду исправляться. В этой статье мы с вами сделаем несколько полезных правок, таких как:
    • Обновим визуальный редактор
    • Добавим в исходный код нумерацию строк и подсветку синтаксиса
    2017-08-24_123218.png 2017-08-24_123227.png
    Если вам интересны эти правки нажмите кнопку Читать далее.

    Список задач на сегодня:
    • 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 файла (русский, обычный и сжатый файлы).

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

    2017-08-24_123240.png

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

    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']],
    Обязательно чистим кеш браузера!

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

    2017-08-24_123218.png

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

    До:

    2017-08-24_123251.png

    После:

    2017-08-24_123227.png

    Откроем файл ../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

    Результат работы:
    2017-08-24_123218.png 2017-08-24_123227.png

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