Download the PHP package makraz/ux-editorjs without Composer

Editor.js Bundle for Symfony using Symfony UX

Symfony UX Bundle implementing Editor.js — a block-style editor that outputs clean JSON data.

Also working out of the box with EasyAdmin.

If you need an easy-to-use block editor (with no complex configuration) in a Symfony project, this is what you need.

• Installation
• Basic Usage
• Available Tools
• Community Tools (built-in DTOs)
• Block Tunes
• Advanced Tool Configuration
• Editor Options
• EasyAdmin Integration
• Image Upload
• Data Format
• Extending the Editor
• JavaScript Events

Installation

Step 1: Require the bundle

If you are using the AssetMapper component, you're done!

Step 2: JavaScript dependencies (Webpack Encore only)

If you are using Webpack Encore (skip this step if using AssetMapper):

Or with npm:

That's it. You can now use EditorjsType in your Symfony forms.

Basic Usage

In a form, use EditorjsType. It works like a classic form type with additional options:

By default, the editor comes with Header, List, and Paragraph tools enabled.

You can add as many Editor.js fields on a single page as you need, just like any normal form field.

Available Tools

Built-in tools (no extra package required)

These tools are bundled with @editorjs/* packages and can be enabled via the EditorjsTool enum or their DTO class:

Quick usage — pass enum values directly for default configuration:

Community Tools (built-in DTOs)

The bundle ships with ready-to-use DTOs for popular community tools. These require adding the corresponding npm package to your project (see Adding Community Tools), but no JavaScript code is needed — the bundle handles the dynamic import.

Usage examples

Community Tool Configuration Reference

AlignmentParagraphTool

AlignmentHeaderTool

AlertTool

AttachesTool

NestedListTool

ToggleBlockTool

TextColorTool

Note: Use type: 'text' to register as textColor, or type: 'marker' to register as colorMarker. You can use both in the same form.

HyperlinkTool

ColumnsTool

The columns tool automatically receives the EditorJS library and all other resolved tools, so nested editors inside columns can use the same tools as the parent editor. No extra configuration is needed.

SimpleImageTool / StrikethroughTool

No configuration options — just instantiate:

Block Tunes

Block Tunes are special tools that apply globally to all blocks (e.g. text alignment, indentation). The bundle provides dedicated DTOs for common tunes and a TuneInterface marker.

Tunes are passed in the same editorjs_tools array — the bundle automatically registers them as both tools and global tunes in the EditorJS config.

Built-in Tunes

Creating a Custom Tune

Implement TuneInterface (which extends ToolInterface):

Advanced Tool Configuration

Built-in Tool Configuration Reference

For finer control over built-in tools, use the DTO classes instead of the enum. You can mix both approaches:

HeaderTool

ListTool

ImageTool

Note: See Image Upload for the built-in upload controller.

TableTool

QuoteTool

WarningTool

EmbedTool

LinkTool

CodeTool

ParagraphTool

RawTool

Tools with no configuration

The following built-in tools have no additional configuration options:

• EditorjsTool::DELIMITER — Horizontal delimiter
• EditorjsTool::MARKER — Text highlighting
• EditorjsTool::INLINE_CODE — Inline code
• EditorjsTool::CHECKLIST — Checklists
• EditorjsTool::UNDERLINE — Underline text

Editor Options

Use the editorjs_options parameter to configure global editor behavior:

EasyAdmin Integration

The bundle provides a dedicated EditorjsAdminField for seamless EasyAdmin integration:

To customize the tools, use setFormTypeOptions:

The field automatically registers the Twig form theme and works with both AssetMapper and Webpack Encore.

Image Upload

The bundle provides a built-in upload controller for the Editor.js Image Tool. Three storage options are available: local filesystem, Flysystem, or your own custom handler.

Option 1: Local Filesystem (default)

Store uploads in your Symfony public/ directory:

Then import the bundle routes:

And use the ImageTool with the built-in endpoints:

Option 2: Flysystem

Store uploads via League Flysystem (S3, GCS, Azure, SFTP, etc.):

Option 3: Custom Handler

Implement your own upload logic by creating a service that implements UploadHandlerInterface:

Upload Configuration Reference

Upload Response Format

The built-in controller returns the format expected by the Editor.js Image Tool:

On error:

Without the Built-in Controller

If you prefer to handle uploads entirely yourself, don't enable the upload config. Create your own controller and pass its URL to the ImageTool:

Your endpoint must return the JSON format shown above.

Data Format

Editor.js outputs structured JSON data. The value stored in your entity will be a JSON string:

Rendering in Twig

To display Editor.js content in your templates, you will need to parse the JSON and render each block. A simple approach:

Extending the Editor

Adding Community Tools

You can use any tool from the Editor.js ecosystem using either a built-in DTO or the generic CustomTool DTO. No JavaScript code required — the bundle dynamically imports the npm package for you.

Step 1: Add the npm package to your project.

For AssetMapper, add it to importmap.php:

For Webpack Encore, install via npm/yarn:

Step 2: Use a built-in DTO or the generic CustomTool:

Creating Your Own Tool DTO

For tools you use frequently, create a dedicated DTO by extending AbstractTool:

Then use it like any built-in tool:

Advanced: JavaScript Event

For full control, you can still register tools manually via the editorjs:options event:

JavaScript Events

The Stimulus controller dispatches events you can listen to for custom behavior:

Symfony Live Component Compatibility

The editor is wrapped in a data-live-ignore container, so it works correctly with Symfony Live Components without being destroyed on re-render.

Requirements

• PHP >= 8.1
• Symfony 6.4, 7.x, or 8.x
• symfony/stimulus-bundle >= 2.9.1

License

MIT