MODX. Расширяем стандартный функционал визредактора CKEditor
Отредактировано: 26 Апреля 2018
CKEditor популярный, функциональный, приятный глазу визуальный редактор. Для Modx написано специальное дополнение, которое позволяет встроить его в cmf быстро и просто.
Не буду много расписывать о преимуществах этого редактора, подробное его описание можно найти на официальном сайте CKEditor. Здесь я хочу остановиться на возможности расширения его функционала в системе MODX, т.к. изначальная его сборка охватывает только стандартные функции.
Установка дополнений в CKEditor
Для CKEditor уже написано множество дополнений, которые можно найти, к примеру, здесь.
Для установки плагинов CKEditor в MODX, надо:
-
Cкачать необходимый плагин, и залить его на сервер в папку /manager/assets/components/ckeditor/ckeditor/plugins/
-
Зайти в системные настройки и выбрать в пространстве имен ckeditor;
-
В поле с ключом extra_plugins прописать название скачанного дополнения (через запятую, если несколько);
-
В поле с ключем 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;
Если не видите никаких изменений, попробуйте скинуть кеш браузера и удалить куки
Здравствуйте!
Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.