Configuration

This page contains guide for Editor.js tunings.

Passing saved data

To initialise the Editor with previously saved data, pass it through the data property:

const editor = new EditorJS({ /** * Id of Element that should contain the Editor */ holderId : 'codex-editor', /** * Available Tools list. * Pass Tool's class or Settings object for each Tool you want to use */ tools: { header: { class: Header, inlineToolbar : true }, // ... }, /** * Previously saved data that should be rendered */ data: {} });

Format of the data object should be same as returned by Editor saving.

Editor ready callback

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 following ways:

Pass onReady property to the configuration object

It must be a function:

var editor = new EditorJS({ // Other configuration properties /** * onReady callback */ onReady: () => { console.log('Editor.js is ready to work!') } });

Use isReady promise

After you create new EditorJS object, it will contain isReady property. It is a Promise object that will be resolved when Editor is ready for work and rejected otherwise. If there is an error during initialisation isReady promise will be rejected with error message.

var editor = new EditorJS(); editor.isReady .then(() => { console.log('Editor.js is ready to work!') /** Do anything you need after editor initialization */ }) .catch((reason) => { console.log(`Editor.js initialization failed because of ${reason}`) });

You can use async/await to keep your code looking more clear:

var editor = new EditorJS(); try { await editor.isReady; console.log('Editor.js is ready to work!') /** Do anything you need after editor initialization */ } catch (reason) { console.log(`Editor.js initialization failed because of ${reason}`) }

Editor modifications callback

Similar with onReady callback, you can use onChange callback to handle any modifications inside the Editor:

var editor = new EditorJS({ // Other configuration properties /** * onReady callback */ onReady: () => {console.log('Editor.js is ready to work!')}, /** * onChange callback */ onChange: () => {console.log('Now I know that Editor\'s content changed!')} });

Change the default Block

By default Editor.js contain Paragraph Block included in bundle. This Blocks called initial: it will be appended after Enter key press and with empty Editor. Also it accepts paste patterns that allows to render other Blocks by pasted URLs.

There are ability to change initial Block for your own. Use initialBlock option for this:

import Header from '@editorjs/header'; import List from '@editorjs/list'; import MyParagraph from 'my-paragraph.js'; const editor = new EditorJS({ /** * Available Tools list. * Pass Tool's class or Settings object for each Tool you want to use */ tools: { header: Header, list: List, myOwnParagraph: MyParagraph }, /** * This Tool will be used as default */ initialBlock: "myOwnParagraph" })

Name of initial Block should be equal to one of Tool`s keys passed by tools option.

Autofocus

Pass autofocus option if you want to set Caret to the Editor after initialisation:

const editor = new EditorJS({ // other configuration options /** * Enable autofocus */ autofocus: true })

Placeholder

Pass placeholder option if you want to set custom placeholder:

const editor = new EditorJS({ ... placeholder: 'Let`s write an awesome story!' ... });