如何解决使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。