mxEditorJs

Block editor for MODX 3 on Editor.js. Content is built in blocks instead of TinyMCE/CKEditor. The site outputs HTML.

Quick links

Need	Document
Enable editor in 3 steps	Quick start
Blocks, media, embed	Editor guide
Configure tool profiles and media	System settings
Connector API, PHP classes, data formats	API
TVs, HTML → Editor.js migration	Integration
Common editor questions	FAQ
Save flow, sidecar, connector	Flows

Who reads what

• Content editor: Editor guide
• Administrator: System settings, FAQ
• Developer: API, Flows, Architecture, Troubleshooting

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

Features

• 15 block types: paragraph, header, list, checklist, quote, table, code, raw HTML, embed, image, gallery, mxGallery, attachment, delimiter, warning. The mxgallery toolbox appears only when the mxGallery package is installed.
• TVs: main resource content and Template Variables of type textarea with richtext
• Media: drag-and-drop via MODX Media Sources. Separate paths for images and attachments (Attaches)
• Gallery: multiple images, sorting, fit or slider, upload and Browse via Media Source
• File browser: browse Media Source directories
• Link autocomplete: MODX resource search
• HTML → Editor.js migration
• Tool profiles: default, minimal, blog, full, and custom
• Fullscreen, Source Preview, Undo/Redo, text alignment
• Localization: Russian and English, inherits manager locale
• CSS presets: classes for images and links

Editor.js plugins used

Tool catalog: Awesome Editor.js.

Block tools

Plugin	Description	Links
@editorjs/paragraph	Basic text block	npm · awesome
@editorjs/header	Headings H2–H5	npm · awesome
@editorjs/list	Bullet and numbered lists	npm · awesome
@editorjs/checklist	Checklist with checkboxes	npm · awesome
@editorjs/quote	Quote	npm · awesome
@editorjs/table	Table	npm · awesome
@editorjs/code	Code block	npm · awesome
@editorjs/raw	Raw HTML	npm · awesome
@editorjs/embed	Embed (YouTube, Paste, etc.)	npm · awesome
@editorjs/attaches	File attachments	npm · awesome
@editorjs/delimiter	Delimiter	npm · awesome
@editorjs/warning	Warning block	npm · awesome
Image	Image with MODX Media Source upload and browser	Part of mxEditorJs (ImageTool.ts), similar to @editorjs/image
Gallery	Image gallery on @kiberpro/editorjs-gallery: sorting, fit/slider modes	Part of mxEditorJs (GalleryTool.ts)
mxGallery	mxGallery package block: media by ids or a collection	Part of mxEditorJs (MxGalleryTool.ts). Toolbox only if core/components/mxgallery/ exists

Inline tools

Plugin	Description	Links
@editorjs/marker	Text highlight (marker)	npm · awesome
@editorjs/inline-code	Monospace code in text	npm · awesome
@editorjs/underline	Underline	npm · awesome

Links and MODX resource autocomplete: the LinkAutocomplete tool in mxEditorJs (inspired by @editorjs/link-autocomplete).

Block tune

Plugin	Description	Links
editorjs-text-alignment-blocktune	Text alignment in blocks (left, center, right)	npm · GitHub · awesome

Editor plugins

Plugin	Description	Links
editorjs-undo	Undo/Redo	npm · GitHub · awesome

Core

Plugin	Links
@editorjs/editorjs — Editor.js core	npm · GitHub · docs

Requirements

Dependency	Version
MODX Revolution	3.0.3+
PHP	8.2+
Node.js	18+ (only for building frontend from source)

Installation

Via package manager

1. Extras → Installer (MODX 3: Packages → Installer)
2. Download Extras, refresh the package list
3. Find mxEditorJs → Download → Install
4. Manage → Clear cache (MODX 3: Settings → Clear cache)

Or install mxeditorjs-*.transport.zip: Packages → Installer → Upload package → install → clear cache.

From source (development)

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

Quick start (3 steps)

1. System → System settings → which_editor → mxEditorJs
2. mxeditorjs.enabled = Yes
3. Open any resource: the block editor appears in the content field

See: Quick start.

System settings (overview)

All settings are in the mxeditorjs namespace.

Key	Default	Purpose
mxeditorjs.enabled	true	Enable/disable editor
mxeditorjs.profile	default	Active tool profile
mxeditorjs.enabled_tools	—	Override profile: comma-separated tool list
mxeditorjs.image_mediasource	1	Media Source ID for images and gallery
mxeditorjs.image_upload_path	images/resources/{resource_id}/	Image upload path (Image, Gallery)
mxeditorjs.file_upload_path	files/resources/{resource_id}/	Attachment upload path (Attaches)
mxeditorjs.gallery_max_count	0	Max images in Gallery block (0 = no limit)
mxeditorjs.max_upload_size	5242880 (5 MB)	Max upload size (bytes)

Full list: System settings.