This page contains guide for Editor.js tunings.
To initialize the Editor with previously saved data, pass it through the
Format of the
data object should be the same as returned by Editor saving.
Editor.js needs a bit time to initialize. It is an asynchronous action so it won't block execution of your main script.
If you need to know when editor instance is ready you can use one of the following ways:
It must be a function:
After you create a new
object, it will contain
property. It is a Promise object that will be resolved when the Editor is ready for work and rejected otherwise. If there is an error during initialization the
promise will be rejected with an error message.
You can use
to keep your code looking more clear:
onReady callback, you can use the
onChange callback to handle any modifications inside the Editor:
onChange callback accepts
CustomEvent describing what happened with the Block. (Available since 2.23.0)
Mutation type (
||BlockAPI||changed Block API|
By default, Editor.js contains Paragraph Block included in a bundle. This Block is called «default»: it will be appended after
Enter key pressing and with an empty Editor. Also, it accepts paste patterns that allow rendering other Blocks by pasted URLs.
There is the ability to change the default Block for your own. Use the
defaultBlock option for this:
The name of the default Block should be equal to one of Tool`s keys passed by
autofocus option if you want to set a Caret to the Editor after initialization:
placeholder option if you want to set a custom placeholder:
The editor outputs some information to the console. You can configure how much information you want to see. You can provide log level via
Here is available levels:
||Show all messages (default)|
||Show info and debug messages|
||Show only warn messages|
||Show only error messages|
Editor.js provides an API for Internationalization that allows localizing all UI texts of the editor's core and plugins.
To create localization of the editor.js you need to provide the
i18n option with the
messages dictionary. The
messages object should contain the
tools and the
See detailed description of the i18n config here: https://editorjs.io/internationalization
Since the 2.19.0 version, Editor.js can be initialized in the read-only mode. That means that users won't have the ability to change the document content.
To initialize this mode, pass the
readOnly: true option via Editor Config:
You can also toggle the read-only mode on the fly using an API method:
You can specify the common order of Inline tools using the
inlineToolbar property can be overridden by the tool's
If you have connected any Block Tunes, you need to specify them in
If you want to enable Tune for particular Tool you can specify it in Tool configuration: