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

Question

我在叶页中使用 editor.js 以允许我的用户创建文本文档。 当用户点击 save 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 数据，并且标签在里面不起作用，我首先放入一个 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