Мои настройки редактора TinyMCE. Установка текстового редактора CKEditor (альтернатива TinyMCE) на MODX Evolution Текстовый редактор modx revo

Скорее всего после обновления системы MODX Evolution у Вас не работает текстовый редактор TinyMCE. Вот какая картина у меня на всех обнеовленных сайтах:

1. Скачиваем плагин от сюда .

2. Разархивируем.

3. Заливаем папку ckeditor в папку assets/plugins/

4. Создаем плагин ckeditor

5. Копируем в него содержимое из ckeditor.tpl

Ставим галочки в системных событиях «OnRichTextEditorInit», «OnRichTextEditorRegister» и «OnInterfaceSettingsRender»

6. Включаем CKEditor

Включить CKEditor можно в Инструменты>Конфигурация>Интерфейс и Представление , в графе "Редактор :" выбрать CKEditor

7. Заходим в любой документ и видим такую картинку

8. Дружим CKEditor с с файловым менеджером KCFinder

Чтобы редактор грамотно работал с файловым менеджером KCFinder заменяем этот код в файле /assets/plugins/ckeditor/functions.php :

$mcpuk_path["base"] = MODX_BASE_URL . "manager/media/browser/mcpuk/browser.php" . $cke_query ; $mcpuk_path["image"] = $mcpuk_path["base"] . "&Type=images"; $mcpuk_path["flash"] = $mcpuk_path["base"] . "&Type=flash"; $mcpuk_path["link"] = $mcpuk_path["base"] . "&Type=files";

$mcpuk_path["base"] = MODX_BASE_URL . "manager/media/browser/mcpuk/browse.php";// . $cke_query ; $mcpuk_path["image"] = $mcpuk_path["base"] . "?type=images"; $mcpuk_path["flash"] = $mcpuk_path["base"] . "?type=flash"; $mcpuk_path["link"] = $mcpuk_path["base"] . "?type=files";

9. Я собрал свою сборку нужных мне кнопок

В файле /assets/plugins/ckeditor/modx_config.js вы можете менять местали, удалять или добавлять кнопки. Для себя я собрал вот такую комбинацию.

Кому интересно, можете заменить строчку кода:

Config.toolbar_modx = [ ["Source"], ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"], ["PasteText","PasteFromWord"], ["Undo","Redo","-","Find","-","RemoveFormat"], "/", ["NumberedList","BulletedList","-","Outdent","Indent","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight"], ["Link","Unlink","Anchor"], ["Image","Flash","Table","HorizontalRule","Smiley","SpecialChar"], "/", ["Format","Font","FontSize"], ["TextColor","BGColor"], ["Maximize", "ShowBlocks","-","About"] ];

Config.toolbar_simple = [ ["Source","-","Maximize","RemoveFormat"], ["PasteText","Find","Replace"], ["Link","Unlink"], ["Image","SpecialChar"], ["Format"], "/", ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"], ["TextColor","BGColor"], ["NumberedList","BulletedList","-","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"] ];

Здесь я оставил только нужное мне: Исходный код, Увеличитель (чтобы удобнее было писать), форматирование текста, Вставить только текст, Поиск и Замена, Ссылки, Вставка изображений, Символы, Заголовки, Текстовые атрибуты, цвет текста и фона, пункты, цитата и выключка текста.

Установка дополнительных плагинов

У CKeditor куча всяких интересных плагинов. Вы их можете найти в интернете и на официальном сайте CKeditor. Все плагины устанавливаются в папку /manager/assets/components/ckeditor/ckeditor/plugins/.

Далее в «Системных настройках» выбираем «ckeditor» и в поле дополнительные плагины (extra_plugins ) вставляем имя устанавливаемого плагина. А в группы кнопок (toolbar ) вставляем в нужном месте "имя плагина". Дополнение установлено и готово к работе.

Предлагаю опробовать CKEditor в качестве визуального редактора кода. Версия 4.0 имеет нейтральную черно-белую тему (очень подходит для админки MODx) и некоторые новые фичи (оценил вставку абзацев в «труднодоступные» места).

Нельзя использовать как фронтенд-редактор.
Работает Ctrl+S, а также вставка ссылок, или встраивание Ресурсов (iframe) и файлов(img, audio, video). Нужно просто выделить текст и бросить в редактор нужный Ресурс/Файл.

В настройках можно сменить цвет ui, скин, добавить свои плагины и изменить порядок и набор кнопок панели.

Указывайте недостающие функции - я постараюсь их реализовать.

Установка через менеджер пакетов.
В отличие от TinyMCE, полностью совместим с

План действий:

Добавить поддержку richtext TV параметров
- Кнопочка Выбрать на сервере в диалоговых окнах (интеграция с браузером файлов MODX)
- Настройки: extraPlugins, disableObjectResizing, управление форматом ссылок, выбор скина
- Меню при перетаскивании файлов и ресурсов: Встроить объект | Вставить ссылку | Вставить имя объекта (было б круто еслиб работало перетаскивание как через правую так и через левую кнопку мыши (как в винде))
- Защита modx-тегов
- Новые кнопки (вставка тегов, правка атрибутов, и т.д.)
- Список классов из распаренной таблицы стилей.
- Подхват системных настроек из редактируемого контекста (сейчас проблемы с ссылками)
- Настраиваемые клавиатурные сочетания.
- Плагин типографики - автозамена кавычек, дефисов и т.д на лету.
- Прозрачная загрузка картинок посредством copy/paste и drag"n"drop
- Автоподстановка (парсинг и вывод) тегов modx, если это вообще возможно и насколько это возможно (может быть окажется полезной разрабатываемая комадой CKSource поддержка виджетов)
- Inline-редактирование с фронтенда.

Чет большой список получился. Надо бы по-убавить свои фантазии…

Инструкция по установке дополнительных плагинов:
Находим нужный плагин, например , закидываем в папку /manager/assets/components/ckeditor/ckeditor/plugins/ , Идем в системные настройки, пространство имен выбираем ckeditor , прописываем наш плагин в extra_plugins (через запятую, если несколько), далее правим toolbar , вписывая новую кнопку (если таковая имеется). Обновляем форму правки ресурса - проверяем результат. Предлагаю делиться интересными плагинами.

Дополнительные плагины (не входят в пакет):
oEmbed - Позволяет вставлять контент (видео, фото, аудио, фреймы) из различных сервиров, имея всего лишь ссылку. Список сервисов огромен, поддерживается YouTube, Vimeo, Flickr, Instagram, GitHub, Twitter, JSFiddle и еще хренова туча различных сервисов.

История изменений:

CKEditor 1.1.1

- Исправлена совместимость с AjaxManager (был косяк с перетаскиванием)
- Добавлены плагины: youtube, wordcount, autocorrect
- Удалено меню, появляющееся при перетаскивании из дерева. Теперь просто вставляется ссылка. Если тащить картинку - вставится картинка.
- Поддержка IE8

CKEditor 1.1.0
====================================
- Интеграция с браузером файлов MODx
- Поддержка richtext TV
- Поддержка кастомных классов ресурсов(Articles for ex.)
- Улучшен drag"n"drop. Теперь можно просто кидать картинки из дерева Файлы чтобы вставить их в контент.
- Починил Ctrl+S
- Опция extra_plugins (Дополнительные плагины)
- Опция skin (Смена шкурки)

Так как MODX Revolution изначально поставляется пустым и для того чтобы заработал сайт, могу с 99% уверенностью сказать, что вам придется установить хотя бы одно дополнение — пакет . В связи с этим я решил написать небольшой список пакетов которые многим пригодятся при создании сайтов на MODx Revolution.

(статья обновлена 11.02.2018)

Дополнения из основного репозитория modx

Ace - подсветка кода при редактировании шаблонов, чанков, снипетов + встроенный emmet .

TinyMCE Rich Text Editor - симпатичный визуальный редактор для контента, может быть расширен за счет дополнительных функций, смотрите сайт разработчика.

filetranslit - переименовывает в латиницу при загрузке файлы с кириллицы (например: загружаете картинку с именем (названием) модх-плагин.png (при переносе сайта, такие имена картинок превратятся в козебряки и перестанут выводиться)), в админку зальется файл с именем modx-plagin.png .

translit – транслитерация псевдонимов для страниц (url) – необходим для .

FormIt - работа с формами (создание контактных форм любой сложности).

Collections - группировка документов (ресурсов) – больше для больших сайтов, где в категориях много документов – помогает разгрузить (ускорить) админку, т.к. если у вас будет огромное дерево ресурсов, у вас оно начнет глючить.

simpleUpdater - обновление модекса в 1 клик.

SEO Pro - SEO помощник! Проверяет длину полей – title, description, добавляет фокусное ключевое слово (keywords) и показывает как страницы будут выглядеть в поисковой выдаче.

Image SEO alt and title tags - автоматом подставляет alt и title для изображений, если они не прописаны. Осторожно применять на рабочем сайте, может поломать некоторые выводы, которые идут через CODE

Gallery – галереи изображений

migx - очень клевая вещь! Вывод нескольких тв в контенте, можно создать слайдер, галерею к примеру и т.п.

SimpleSearch – организация поиска по сайту.

Tagger - теги для записей, облако тегов.

ClientConfig – создание клиентских настроек, которые в дальнейшем смогут редактировать менеджеры. Т.е. заносим в него все что часто меняется, либо просто то к примеру контакты, адрес, слоган и т.д. – чтобы заказчик смог все легко и быстро менять.

Inherit Template — устанавливает шаблон для дочерних элементов.

VersionX – компонент для тех кто отдает сайты на доработку фрилансерам, ну возможно еще новичкам. Предназначен для создания локальных бекапов всех элементов - (чанки, сниппеты, ресурсы). Можно посмотреть старую версию и при необходимости восстановить ее. Так же, позволяет узнать, кто внес те или иные изменения.

Console – позволяет из бэкенда запускать PHP код.

AjaxManager — ускорение работы админки.

Captcha – капча для входа в админку – доп защита.

backupMODX – создание бекапов с работающего сайта в 1 клик.

logPageNotFound –лог 404 ошибок. Отлично подходит для отслеживания битых ссылок.

cacheClear – позволяет удалить все из папки /core/cache/ одним кликом.

Дополнения из репозитория modstore.pro

О том как подключить дополнительный репозиторий, читаем .

AjaxForm - Отправка контактных форм без перезагрузки страницы, через Ajax . Использует FormIt, но по сути можно указать и свой снипет.

DateAgo - Приятное форматирование дат как у CMS LiveStreet.

autoRedirector - создает 301 редиректы на автомате, так же можно создать редиректы в ручную.

Tickets - создание блога, формы комментирования, отзывов и тому подобное.

Jevix - что-то типа типографа, устанавливается на автомате с Tickets

mixedImage - смешанная загрузка файлов (замена дополнительного поля (для картинок, вложений и прочего)

pdoTools - целый комбайн, в состав которого входят следующие снипеты:
pdoRecources - предназначен в первую очередь для вывода списка ресурсов, но на самом деле при помощи него можно сделать очень много интересного: карту сайта (для людей), фото галереи, портфолио, кейсы из ресурсов, и т.д.
pdoMenu - создание меню.
pdoPage - как и pdoRecources выводит список ресурсов + создает постраничную навигацию, в том числе из выбоки других сниппетов.
pdoCrumbs - для создания хлебных крошек (bread crumbs)
pdoUsers — вывод пользователей
pdoSitemap — создание авто генерируемого sitemap.xml
pdoNeighbors — выводит предыдущие и следующие документы (полезно для блогов, статей и т.д.)
pdoField — выводит любое поле указанного ресурса или его родителя, включая TV параметры.
pdoTitle — предназначен для визульного различия документов с постраничной навигацией.
pdoArchive — вывод архива документов сайта с разбивкой на дни, месяцы и годы
Парсер — перехватывает обработку тегов на странице.
Это, пожалуй самый необходимый пакет, без него нормального сайта не собрать. Да еще он добавляет поддержку Fenom шаблонизатора, который побыстрее встроенного.

miniShop2 - создание интернет магазина.

BannerY - Компонент для управления баннерами (рекламой). На нем по сути легко реализовать слайдер.

phpThumbOn - миниатюры для изображений (вывод изображений с нужными размерами).

MinifyX – минификация и склейка скриптов и стилей в два файла (css и js) – позволяет уменьшить количество запросов и увеличить скорость загрузки страниц.

xPoller2 — Мультиязычные опросы.

AdminTools – смена цветовой схемы админки, избранные элементы, заметки, авторизация в админке через email и прочее.

frontendManager — Редактирование страниц с frontend’a.

dbAdmin – просмотр листинга таблиц БД из админки MODx Revo. Так же позволяет производить экспорт как отдельной таблицы, так и всей базы в целом. Еще умеет удалять и очищать таблицы (будьте аккуратны при его использовании) и производить разного рода SQL-запросы.

modDevTools – быстрый поиск и замена элементов в чанка, сниппетах.

debugParser – поиск узких мест на сайте.

tagElementPlugin – позволяет редактировать сниппеты или чанки по выделению его тега и нажатию сочетаний клавиш ctrl+enter.

controlErrorLog – добавляет иконку на панели верхнего меню, которая сообщает о наличии записей в журнале ошибок.

Универвальные плагины

— автоматическое сжатие картинок на любых сайтах, сервис платный, но нее дорогой, со старта дается 10мб — их хватает на сжатие примерно 500 картинок — что хватит для любой визитки, так же можно дополнительно получить до 200мб бесплатно.

Практически каждый веб-мастер использует тот или иной визуальный редактор (WYSIWYG) для размещения контента на сайте. Визуальные редакторы позволяют не только работать с HTML как с обычным текстом в текстовом редакторе, но и обладают функционалом, облегчающим жизнь вебмастеру. Однако последнее может не только упростить жизнь, но и усложнить.

В MODX Revolution в основном пользуюсь редактором TinyMCE , который устанавливается отдельным пакетом. Говорить о его достоинствах и недостатках не буду, а коснусь сегодня только тех моментов, которые я использую для облегчения работы с ним.

Дефолтные настройки

Сразу после установки пакета TinyMCE проверяю в системных настройках блоке tinymce:

Tiny.forced_root_block делаю пустой tiny.path_options должна быть пустая tiny.base_url должна быть пустая

Так же меняю опцию convert_urls на No в настройках плагина TinyMCE. Делаю я это, чтобы редактор никак не пытался изменять ссылки, которые я задаю.

Подключение файла стилей

Не всегда подключаю, но иногда это бывает полезным и упрощает работу с контентом. Делается через указание системной настройки editor_css_path в блоке системных настроек Rich-Text Editor настройка Path to CSS file (Путь до CSS файла) или.

HTML5 тэги

Честно говоря, включение HTML5 тэгов и их обработка по уму у меня не получилась. Поэтому я пошел путем разрешения любых тэгов путем добавления в файл core/components/tinymce/templates/script.tpl после строки после строки

Tiny.config = modx->toJSON($this->properties); ?>;

Tiny.config.valid_elements = "*[*]";

Которая разрешает прохождение любых тэгов. Для желающих заморочиться, этой переменной можно присвоить перечень всех возможных HTML тэгов, включая HTML5 тэги из файла xconfig.js входящего в пакет.