CODEWITHSUNDEEP
javascripteditoreditorjs
Max
Max

Reputation: 799

How to add a new block in Editor.js

i am using Editor.js and i do not know how to add a new block in the editor via javascript, e.g.

I've created the editor by docs:

const editor = new EditorJS({
      holderId: 'codex-editor',
      autofocus: true,
      data: {
        "time": 1550476186479,
        "blocks": [
           {
            type: 'paragraph', 
            data: {
             text: 'Hello world'
            }
           }
        ]
      },
      onReady: () => {
        console.log('Editor.js is ready to work!');
      }
    })

But i cannot add any new text, i've tried the method:

const newBlock = {
      type: 'paragraph', 
      data: {
          text: 'Hello world'
      }
    };
editor.configuration.data.blocks.push(newBlock);

It does not help, editor.configuration.data.blocks updates himself values but added values does not display in Editor.js view.

Upvotes: 2

Views: 5701

Answers (2)

user8980717
user8980717

Reputation:

hopefully this example of mine will help you. I was doing a photo saving using Firebase. After saving it, I want to insert the image inside editorjs. Here's the code of how I do it.

return new Promise((resolve, reject) => {
    task.snapshotChanges()
      .pipe(
        finalize( () => {
          ref.getDownloadURL()
            .subscribe(url => {
              console.log(url);
              this.editor.blocks.insert(
                "image",
                {
                  file: {
                    url : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg"
                  },
                  caption : "Roadster // tesla.com",
                  withBorder : false,
                  withBackground : false,
                  stretched : true
                })
            },error => {
              console.log(error)
            })
        }))
      .subscribe( url => {
        if(url){ console.log(url); }
      })

Upvotes: 1

Specc
Specc

Reputation: 56

You can use blocks.insert() API method. This feature is available since 2.15 version

https://editorjs.io/blocks#insert

Upvotes: 2

Related Questions