如何在Editor.js中添加新块

时间:2019-05-15 12:42:10

标签: javascript editor codex

我正在使用Editor.js,但我不知道如何通过javascript在编辑器中添加新块,例如

我已经通过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!');
      }
    })

但是我无法添加任何新文本,我已经尝试了该方法:

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

这无济于事,editor.configuration.data.blocks更新自己的值,但添加的值不会显示在Editor.js视图中。

2 个答案:

答案 0 :(得分:0)

您可以使用blocks.insert() API方法。从2.15版本开始提供此功能

https://editorjs.io/blocks#insert

答案 1 :(得分:0)

希望我的这个例子对您有帮助。我当时使用Firebase进行照片保存。保存后,我想将图像插入到editorjs中。这是我的代码。

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