如何在 Editor.js 中添加新块答案

【问题标题】：How to add a new block in Editor.js如何在 Editor.js 中添加新块
【发布时间】：2019-10-02 14:44:15
【问题描述】：

我正在使用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 视图中。

【问题讨论】：

标签： javascript editor codex editorjs

【解决方案1】：

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

https://editorjs.io/blocks#insert

【讨论】：

嗨，如果我想创建一个插入其他块的新块，我该怎么做？ IE。一个名为“section”的工具，可以插入“header”和“paragraph”？我查看了文档，但它们似乎都是完全自定义的块，我想在添加块菜单“+”中单击单个按钮（自定义工具 - “部分”）时插入多个块？谢谢

【解决方案2】：

希望我的这个例子对你有所帮助。我正在使用 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); }
      })

【讨论】：