mxEditorJs

Блочный редактор для MODX 3 на базе Editor.js. Вместо TinyMCE/CKEditor контент собирается блоками. На сайте выходит HTML.

Быстрые ссылки

Нужно	Документ
Включить редактор за 3 шага	Быстрый старт
Работа с блоками, медиа, embed	Руководство редактора
Настроить профили инструментов и медиа	Системные настройки
Connector API, PHP-классы, форматы данных	API
TV, миграция HTML → Editor.js	Интеграция
Типовые вопросы редакторов	FAQ
Save flow, sidecar, connector	Потоки

Кому что читать

• Редактору: Руководство редактора
• Администратору: Системные настройки, FAQ
• Разработчику: API, Потоки, Архитектура, Решение проблем

modstore.pro, GitHub. Changelog: core/components/mxeditorjs/docs/changelog.txt.

Возможности

• 15 типов блоков: параграф, заголовок, список, чеклист, цитата, таблица, код, raw HTML, embed, изображение, галерея, mxGallery, вложение, разделитель, предупреждение. Toolbox mxgallery только если установлен пакет mxGallery.
• TV: основной контент и Template Variables типа textarea с richtext
• Медиа: drag-and-drop через Media Sources. Отдельные пути для изображений и вложений (Attaches)
• Галерея: несколько изображений, сортировка, сетка или слайдер, загрузка и «Обзор» через Media Source
• Браузер файлов: навигация по Media Source
• Автодополнение ссылок: поиск ресурсов MODX
• Миграция HTML → Editor.js
• Профили: default, minimal, blog, full и свои
• Полноэкранный режим, Source Preview, Undo/Redo, выравнивание
• Локализация: русский и английский, наследует локаль менеджера
• CSS-пресеты: классы для изображений и ссылок

Используемые плагины Editor.js

Каталог инструментов: Awesome Editor.js.

Блоковые инструменты (Block Tools)

Плагин	Описание	Ссылки
@editorjs/paragraph	Базовый текстовый блок	npm · awesome
@editorjs/header	Заголовки H2–H5	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
Gallery	Галерея на базе @kiberpro/editorjs-gallery: сортировка, режимы fit/slider	В составе mxEditorJs (GalleryTool.ts)
mxGallery	Блок пакета mxGallery: медиа по ids или коллекция	В составе mxEditorJs (MxGalleryTool.ts). Toolbox только если есть core/components/mxgallery/

Инлайновые инструменты (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	npm · GitHub · документация

Требования

Зависимость	Версия
MODX Revolution	3.0.3+
PHP	8.2+
Node.js	18+ (только для сборки фронтенда из исходников)

Установка

Через менеджер пакетов

1. Extras → Installer (MODX 3: Пакеты → Установщик)
2. Download Extras, обновите список пакетов
3. Найдите mxEditorJs → Download → Install
4. Управление → Очистить кэш (MODX 3: Настройки → Очистить кэш)

Либо mxeditorjs-*.transport.zip: Пакеты → Установщик → Загрузить пакет → установить → очистить кэш.

Из исходников (разработка)

cd /path/to/modx/Extras/
git clone https://github.com/Ibochkarev/mxEditorJs mxEditorJs
cd mxEditorJs
npm install
npm run build
php _build/build.php

Быстрый старт (3 шага)

1. Система → Системные настройки → which_editor → mxEditorJs
2. mxeditorjs.enabled = Да
3. Откройте ресурс: в поле контента появится блочный редактор

Подробнее: Быстрый старт.

Системные настройки (кратко)

Все настройки в пространстве имён mxeditorjs.

Ключ	По умолчанию	Назначение
mxeditorjs.enabled	true	Включить/выключить редактор
mxeditorjs.profile	default	Активный профиль инструментов
mxeditorjs.enabled_tools	—	Переопределение профиля: список инструментов через запятую
mxeditorjs.image_mediasource	1	ID Media Source для изображений и галереи
mxeditorjs.image_upload_path	images/resources/{resource_id}/	Путь загрузки изображений (Image, Gallery)
mxeditorjs.file_upload_path	files/resources/{resource_id}/	Путь загрузки файлов-вложений (Attaches)
mxeditorjs.gallery_max_count	0	Макс. изображений в блоке Gallery (0 = без лимита)
mxeditorjs.max_upload_size	5242880 (5 МБ)	Макс. размер загружаемого файла (байты)

Полный список: Системные настройки.