Блог

Я использую 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))
                }
  

Это немного сложно, поскольку я использую тег leaf для ввода данных 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>
  

Проблема, с которой я сталкиваюсь, заключается в том, что редактор не загружает сохраненные данные. Есть идеи?

Я думаю, это сработает, если вы измените

 data: {
  jd
}
  

Для:

 data: jd