• Заметки

    • MODX. Расширяем стандартный функционал визредактора CKEditor

    Меню

    Отредактировано: 26 Апреля 2018

    CKEditor популярный, функциональный, приятный глазу визуальный редактор. Для Modx написано специальное дополнение, которое позволяет встроить его в cmf быстро и просто. 

    Не буду много расписывать о преимуществах этого редактора, подробное его описание можно найти на официальном сайте CKEditor. Здесь я хочу остановиться на возможности расширения его функционала в системе MODX, т.к. изначальная его сборка охватывает только стандартные функции.

    Установка дополнений в CKEditor

    Для CKEditor уже написано множество дополнений, которые можно найти, к примеру, здесь. 

    Для установки плагинов CKEditor в MODX, надо:

    1. Cкачать необходимый плагин, и залить его на сервер в папку /manager/assets/components/ckeditor/ckeditor/plugins/

    2. Зайти в системные настройки и выбрать в пространстве имен ckeditor;

    3. В поле с ключом extra_plugins прописать название скачанного дополнения (через запятую, если несколько);

    4. В поле с ключем toolbar вписать название дополнения (если дополнение имеет свою кнопку).

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

    Стили сайта для визуального редактора

    В визуальном редакторе можно сделать отображение элементов аналогичное отображению на сайте. Для этого надо все необходимые стили собрать в одном файле, к примеру content.css, и указать путь до этого файла в Системных настройках, в поле с ключом editor_css_path.

    Собственные элементы в визуальном редакторе

    В визуальный редактор также можно добавить кастомные элементы с нужными классами и стилями. Для этого надо создать файл, к примеру content.js, и записать в него необходимые данные по образцу: 

    CKEDITOR.stylesSet.add('default',[
/* BlockStyles */
{name:'Код',element:'code'},
/* InlineStyles */
{name:'Синим',element:'span',attributes:{'class':'blue'}},
{name:'Красным',element:'span',attributes:{'class':'red'}},
/* ObjectStyles */
{name:'Картинкавлево',element:'image',attributes:{'style':'float:left;margin:0 10px 10px 0;'}},
{name:'Картинкавправо',element:'image',attributes:{'style':'float:right;margin:0 0 10px 10px;'}},
//ит.д.
]);

    После чего в Системных настройках в поле с ключом ckeditor.styles_set пропишите название набора стилей, и путь до файла. Примерно так:

    default:/assets/template/def/js/content.js

    Отключение преобразования спецсимволов

    В файле config.js manager/assets/components/ckeditor/ckeditor/config.js прописать: config.basicEntities = false;

    Если не видите никаких изменений, попробуйте скинуть кеш браузера и удалить куки

    back-end modx компоненты