使用 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