How to load blocks data into EditorJS?

Question

I want to load blocks data dynamically to my EditorJS instance. I would like to do something like this:

const editor = new EditorJS();
editor.load({ blocks: my_blocks })

I do not seem to find any documentation on how to do it on https://editorjs.io/

I know that I can load blocks to EditorJS during initialization, but I need to load dynamic data on button click.

Envisage

Answer 1

You could use the Blocks Core API, by means of the insert() method, using the below signature:

 insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean): void

So, in your case, it could be:

editor.blocks.insert('header', {text: 'My header'});

Where header is the type and the second argument is the block data

A cleaner approach would be to pre-define your block as follows:

const blockToAdd = {
  type: 'header', 
  data: {
     text: 'My header'
  }
};

editor.blocks.insert(blockToAdd);

Koffler

Thank you, that should work. So I need to add the blocks manually one by one if I understood correctly. – Envisage

Indeed, but you could create a function and provide an array of blocks as argument, as follows: function addBlocks(blocks) { for (var i of blocks) { editor.blocks.insert(i) } } – Koffler

Yes, of course. But we need to clean the existing blocks first. – Envisage

I tried this way, but I got an error. You have to pass each property directly in the insert function as stated in https://mcmap.net/q/2031253/-getting-an-error-when-trying-to-add-a-new-block-to-editorjs-manually – Sommersommers

Answer 2

Not sure when this was added to the API, but there is also editor.render(data) which loads JSON data into the editor dynamically.

render(data: OutputData): Promise
Method removes all Blocks and fills with new passed JSON data

Source: https://editorjs.io/blocks#render

Rohn