Всі попередні статті по роботі c cms opencart стосувалися користувальницької частини. Сьогодні поговоримо про адміністративну частини, а точніше про візуальному редакторі опенкарт Summer Note.
В даному прикладі розглядається версія опенкарт 2.3 (OcStore 2.3).
Перевірте, який редактор у вас встановлений в настройках опенкарт. Заходимо в
Система -> Налаштування -> Сервер -> Візуальний редактор за замовчуванням
Вибираємо в якості редактора Summer Note.
За замовчуванням редактор опенкарт не підсвічується і не нумерує вихідний код, що серйозно ускладнює роботу з ним. Найцікавіше, що функціонал, який виконує підсвічування коду, вже вбудований в опенкарт версії 2.3. За підсвічування коду в опенкарт відповідає javascript бібліотека Codemirror, її файли ми і будемо підключати. Ще раз звертаємо увагу, що всі зміни відбуваються в версії opencart 2.3 (OcStore 2.3).
Пряма зміна коду
Як завжди ми розглядаємо два варіанти, пряме зміна коду (кому-то простіше, але не завжди правильно) і модифікатор підсвічування коду. В обох випадках немає ніяких складнощів.
Отже, знаходимо файл:
admin / view / template / common / header.tpl
і перед рядком:
<link type="text/css" href="view/stylesheet/stylesheet.css" rel="stylesheet" media="screen">
Підключаємо бібліотеку codemirror:
<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>Після цього не забуваємо скидати кеш.
Ось таку картинку ми бачимо до змін:
Отримуємо наступний результат:
Які зміни відбулися:
з’явилася нумерація рядків;
реалізована підсвічування коду;
На цьому етапі можна зупиниться, кому підходить світлий варіант підсвічування, а мене він абсолютно не влаштовує, тому що звик, коли вихідний код йде в темній темі.
Виправляємо цю картину, змінюючи тему за замовчуванням на темну (дані зміни за бажанням).
Знаходимо нашу новий рядок:
<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/lib/codemirror.css">і після неї вставляємо:
<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/theme/cobalt.css">Відкриваємо файл:
admin/view/javascript/codemirror/lib/codemirror.jsШукаємо рядок:
option("theme", "default", function(cm) {Міняємо на:
option("theme", "cobalt", function(cm) {Зберігаємо, скидаємо кеш, оновлюємо модифікатори.
Отримуємо таку картинку:
Нам комфортніше працювати з даними темним варіантом оформлення.
Модуль (модифікатор) підсвічування і нумерації коду.
Модуль робить все зміни, що ми розглянули вище, без стороннього втручання і зміни основного коду. Працювати з модулем завжди простіше, швидше, зручніше. Просто через адмінку опенкарт завантажте модуль, скиньте кеш в адмінці, поновіть модифікатори і скиньте кеш браузера. Після цього можете насолоджуватися результатом.
Варіант зі світлою темою не вносить ніяких змін в вашу тему, варіант з темної темою перезапише файл codemirror.js.
Увага! Перед установкою рекомендуємо перевірити вашу версію опенкарт. Якщо ви використовуєте платну тему, то модифікатор може не спрацювати. В даному випадку компанія NeoAgency готова прийти до вас на допомогу. Залишайте заявку на сайті або телефонуйте менеджеру.
Comments are closed.