mxEditorJs
Блочный редактор Editor.js для MODX 3 — контент блоками вместо TinyMCE/CKEditor
mxEditorJs
Блочный редактор контента для MODX 3 на базе Editor.js. Работает вместо стандартного TinyMCE/CKEditor: контент создаётся блоками (заголовок, текст, картинка, видео), на сайте отображается корректный HTML.
Быстрые ссылки
| Нужно | Документ |
|---|---|
| Включить редактор за 3 шага | Быстрый старт |
| Настроить профили инструментов и медиа | Системные настройки |
| Connector API, PHP-классы, форматы данных | API |
| Работа с TV и миграция HTML → Editor.js | Интеграция |
Кому что читать
- Редактору контента: Быстрый старт → работа в интерфейсе (блоки, картинки, ссылки) — см. руководство в репозитории компонента.
- Администратору: Системные настройки → профили, медиа, пресеты.
- Разработчику: API → Connector, PHP, JS; Интеграция → TV, миграция.
Возможности
- Блочный редактор — 13 типов блоков: параграф, заголовок, список, чеклист, цитата, таблица, код, raw HTML, embed, изображение, вложение, разделитель, предупреждение
- Поддержка TV — редактор в основном контенте ресурса и в Template Variables типа
textareaс опцией richtext - Загрузка медиа — drag-and-drop изображений и файлов через MODX Media Sources
- Браузер файлов — навигация по директориям Media Source
- Автодополнение ссылок — поиск ресурсов MODX при вставке ссылок
- Миграция HTML → Editor.js — конвертация существующего HTML-контента
- Профили инструментов — предустановки (default, minimal, blog, full) и пользовательские
- Полноэкранный режим, Source Preview, Undo/Redo, выравнивание текста
- Локализация — русский и английский, наследование локали менеджера
- CSS-пресеты — настраиваемые классы для изображений и ссылок
Используемые плагины Editor.js
mxEditorJs собирает редактор из следующих блоковых и инлайновых инструментов, блочного tune и плагина. Полный каталог инструментов и интеграций: Awesome Editor.js.
Блоковые инструменты (Block Tools)
| Плагин | Описание | Ссылки |
|---|---|---|
| @editorjs/paragraph | Базовый текстовый блок | npm · awesome |
| @editorjs/header | Заголовки H1–H6 | npm · awesome |
| @editorjs/list | Маркированные и нумерованные списки | npm · awesome |
| @editorjs/checklist | Чеклист с галочками | npm · awesome |
| @editorjs/quote | Цитата | npm · awesome |
| @editorjs/table | Таблица | npm · awesome |
| @editorjs/code | Блок кода | npm · awesome |
| @editorjs/raw | Сырой HTML | npm · awesome |
| @editorjs/embed | Встраиваемый контент (YouTube, Paste и т.д.) | npm · awesome |
| @editorjs/attaches | Вложение файлов | npm · awesome |
| @editorjs/delimiter | Разделитель | npm · awesome |
| @editorjs/warning | Блок предупреждения | npm · awesome |
| Image (кастомный) | Изображение с загрузкой и браузером MODX Media Source | В составе mxEditorJs (ImageTool.ts), аналог @editorjs/image |
Инлайновые инструменты (Inline Tools)
| Плагин | Описание | Ссылки |
|---|---|---|
| @editorjs/marker | Выделение текста (маркер) | npm · awesome |
| @editorjs/inline-code | Моноширинный код в тексте | npm · awesome |
| @editorjs/underline | Подчёркивание | npm · awesome |
Ссылки в тексте и автодополнение по ресурсам MODX реализованы кастомным инструментом LinkAutocomplete в составе mxEditorJs (по мотивам @editorjs/link-autocomplete).
Блочный tune (Block Tune)
| Плагин | Описание | Ссылки |
|---|---|---|
| editorjs-text-alignment-blocktune | Выравнивание текста в блоках (влево, по центру, вправо) | npm · GitHub · awesome |
Плагины редактора
| Плагин | Описание | Ссылки |
|---|---|---|
| editorjs-undo | Отмена и повтор действий (Undo/Redo) | npm · GitHub · awesome |
Ядро
| Плагин | Ссылки |
|---|---|
| @editorjs/editorjs | Ядро Editor.js |
Требования
| Зависимость | Версия |
|---|---|
| MODX Revolution | 3.0.3+ |
| PHP | 8.2+ |
| Node.js | 18+ (только для сборки фронтенда из исходников) |
Установка
Через менеджер пакетов
- Перейдите в Extras → Installer (в MODX 3: Пакеты → Установщик)
- Нажмите Download Extras и обновите список пакетов
- Найдите mxEditorJs в списке, нажмите Download, затем Install
- Управление → Очистить кэш (в MODX 3: Настройки → Очистить кэш)
Либо загрузите транспортный пакет вручную: скачайте mxeditorjs-*.transport.zip, в Пакеты → Установщик нажмите Загрузить пакет, выберите файл и установите, затем очистите кэш.
Из исходников (разработка)
bash
cd /path/to/modx/Extras/
git clone <repo-url> mxEditorJs
cd mxEditorJs
npm install
npm run build
php _build/build.phpБыстрый старт (3 шага)
- Система → Системные настройки → найдите
which_editor→ выберите mxEditorJs - Убедитесь, что
mxeditorjs.enabled= Да - Откройте любой ресурс — в поле контента появится блочный редактор
Подробнее: Быстрый старт.
Системные настройки (кратко)
Все настройки в пространстве имён mxeditorjs.
| Ключ | По умолчанию | Назначение |
|---|---|---|
mxeditorjs.enabled | true | Включить/выключить редактор |
mxeditorjs.profile | default | Активный профиль инструментов |
mxeditorjs.enabled_tools | — | Переопределение профиля: список инструментов через запятую |
mxeditorjs.image_mediasource | 1 | ID Media Source для изображений |
mxeditorjs.max_upload_size | 5242880 (5 МБ) | Макс. размер загружаемого файла (байты) |
Полный список: Системные настройки.