使用 Vapor 3 后端和 Leaf 页面重新加载 editor.js 中保存的数据

Question

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

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

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 数据，并且由于标签在 a 中不起作用，我首先放入一个 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>

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

Answer 1

我想如果你改变它就可以了

data: {
  jd
}

收件人：

data: jd

使用 Vapor 3 后端和 Leaf 页面重新加载 editor.js 中保存的数据

Reload saved data in editor.js using Vapor 3 backend and Leaf page

javascript

swift

vapor

leaf

editorjs