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;

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