Saving data

To get all entry's data from Editor.js, call the save() method on the class instance. It will return a Promise that resolves with clean data.

const editor = new EditorJS(); editor.save().then((outputData) => { console.log('Article data: ', outputData) }).catch((error) => { console.log('Saving failed: ', error) });

After this, you can send this data to the backend for processing and saving.

Output data format

Object returned by the save() method conforms the following scheme:

{ "time" : 1550476186479, "blocks" : [], "version" : "2.8.1" }
time number Saving timestamp
blocks {type: string, data: object}[] List of Blocks data
version string Version of Editor.js

A blocks property contains an array of objects with type and data of Editor Blocks. The values of this fields are depend on the Tools you use

For example, here is a data of page that uses Header, Paragraph and List Tools.

{ "time": 1550476186479, "blocks": [ { "type": "header", "data": { "text": "Editor.js", "level": 2 } }, { "type": "paragraph", "data": { "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration." } }, { "type": "header", "data": { "text": "Key features", "level": 3 } }, { "type": "list", "data": { "style": "unordered", "items": [ "It is a block-styled editor", "It returns clean data output in JSON", "Designed to be extendable and pluggable with a simple API" ] } }, { "type": "header", "data": { "text": "What does it mean «block-styled editor»", "level": 3 } }, { "type": "paragraph", "data": { "text": "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core." } } ], "version": "2.8.1" }

Configure Block type

Note that type field in Block data is the key of object of Editor config's tools property. In other words, it can be changed by you own.

For example, if we change key «header» with «heading», in output data blocks will be marked as type: "heading"

const editor = new EditorJs({ tools: { - header: Header, + heading: Header, list: List }, })
{ "time": 1550476186479, "blocks": [ { "type": "heading", "data": { "text": "Editor.js", "level": 2 } }, { "type": "paragraph", "data": { "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration." } }, { "type": "heading", "data": { "text": "Key features", "level": 3 } } ], "version": "2.8.1" }