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.
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 id, type and data of Editor Blocks. The values of this fields are depend on the Tools you use.
{
"time": 1550476186479,
"blocks": [
{
"id": "oUq2g_tl8y",
"type": "header",
"data": {
"text": "Editor.js",
"level": 2
}
},
{
"id": "zbGZFPM-iI",
"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."
}
},
{
"id": "qYIGsjS5rt",
"type": "header",
"data": {
"text": "Key features",
"level": 3
}
},
{
"id": "XV87kJS_H1",
"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"
]
}
},
{
"id": "AOulAjL8XM",
"type": "header",
"data": {
"text": "What does it mean «block-styled editor»",
"level": 3
}
},
{
"id": "cyZjplMOZ0",
"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"
}
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"
}