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

问题描述

我在叶页中使用了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,}
      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>

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

解决方法

如果您进行更改，我想它会起作用

data: {
  jd
}

收件人：

data: jd