Editor.js: how to add new block programitically.

[chouglesaud]

i have blocks in json format i want to insert in editor programitically.

[enes-sahin]

You can use data option in order to load your json data. It must be in the same format of EditorJS JSON output.

const editor = new EditorJS({
     tools: { 
        // Tools
     },
     data: YOUR JSON DATA
});

But if you want to insert extra block in current data, check insert mehod.

https://editorjs.io/blocks#insert

[enes-sahin]

I just tried insert method creating new Tool class like that :

class MyCustomBlocks {

  constructor({ data, api }){
     this.api = api;

     this.api.blocks.insert(
       "paragraph", { text : "1"}
    );

    this.api.blocks.insert(
      "paragraph", { text : "2"}
    );

   this.api.blocks.insert(
    "paragraph", { text : "3"}
    );
  }
}

const editor = new EditorJS({
     tools: { 

        // other tools

        mycustomblocks : MyCustomBlocks
     },
});

This creates 3 paragraph block in editor.

Altough the documentation points out that new block will be inserted after current block, the example code above inserts at the beginning of current blocks.

Parameters | Description
-- | --
String | New Block type
Object | New Block data
Object | Config for new Block's Tool
Number | Position for block. By default, it will inserted after current Block
Boolean | Need to set focus or not.

Be careful : This code inserts new blocks every refresh of page. You must set your logic.

[chouglesaud]

thanks a lot