1

我在叶子页面中使用 editor.js 来允许我的用户创建文本文档。当用户点击保存 editor.js 时，会将他们创建的内容输出为 JSON，然后我将其保存到带有 Vapor 后端的数据库中。这一切都很好。我现在希望用户能够返回页面并编辑他们创建的内容，添加更多块或更改现有块。editor.js 文档说您只需在创建编辑器时将 JSON 添加到数据字段中。

我就是这样做的。首先，我从数据库中提取数据并将其编码为 JSON。然后将其传递给叶子页面。（变量名blockData）

return temCol.findOne(["_id":try ObjectId(tempId)], as: EditData.self).flatMap{ temp in
      let blockData = try JSONEncoder().encode(temp)
      return try req.view().render("docEditor", RenderDocEditor(orgId: orgId, logoUrl: wall?.logoUrl, blockData: blockData))
                }

这有点复杂，因为我使用叶子标签来引入 JSON 数据，并且标签在内部不起作用，我首先放入一个 div，一旦我让它工作，它就会隐藏在页面上。

<div id="blockData" >
      #(blockData)
</div>

由于它目前没有隐藏，我可以在页面上看到数据。然后我使用以下脚本加载 editor.js。

<script>
    let data = document.getElementById('blockData').innerHTML
    let jd = JSON.parse(data)
    
    const editor = new EditorJS({
      autofocus: true,
      tools: {
          paragraph: {
            class: Paragraph,
            inlineToolbar: true,
             
          },
          header: {
              class: Header,
              config: {
                  placeholder: "Start Writing here",
              }
          },
          list: {
            class: List,
            inlineToolbar: true,
          },
      }
      data: {
             jd
          }
    });
   const saveButton = document.getElementById('save-button');
   const output = document.getElementById('output');

   saveButton.addEventListener('click', () => {
     editor.save().then( savedData => {
        var formData = JSON.stringify(savedData, null, 4);
       output.innerHTML = formData
       docData.value = formData
       theform.submit()
       
     })
   })
</script>

我遇到的问题是编辑器没有加载保存的数据。有任何想法吗？

4

1 回答 1

1

我想如果你改变它会起作用

data: {
  jd
}

至：

data: jd
于 2020-09-25T15:02:38.793 回答