CODEWITHSUNDEEP
editorjs
tzador
tzador

Reputation: 2631

How to load blocks data into EditorJS?

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.

Upvotes: 6

Views: 7384

Answers (2)

Tom
Tom

Reputation: 601

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

Upvotes: 5

BiOS
BiOS

Reputation: 2304

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);

Upvotes: 4

Related Questions