用 node.js 和 mongodb 实现/使用 quill 的正确方法是啥？

Posted 2023-03-07

【中文标题】用 node.js 和 mongodb 实现/使用 quill 的正确方法是啥？

【英文标题】：what is the proper way to implement/use quill with node.js and mongodb?用 node.js 和 mongodb 实现/使用 quill 的正确方法是什么？

【发布时间】：2018-10-03 19:47:07

【问题描述】：

所以我正在尝试为自己构建一个博客，并且我想要一个 UI 来更新博客，而不是每次都弄乱 html 文件。

我计划从 quill 编辑器（它是一个 delta 对象）获取内容（包含图片和文本的博客内容），然后将其存储到 MongoDB 中。

然后当我需要显示它时，从数据库中检索它，然后使用 quill-render (https://www.npmjs.com/package/quill-render) 动态渲染它。

问题是，因为我不知道 quill 是如何设计的，所以有人可以告诉我这是否是正确的方法吗？还是让 quill 以某种方式将内容导出到 HTML 文件，存储它然后简单地重定向到它更好？提前致谢。

【参考方案1】：

quill 文档建议您以 Delta 格式操作 de 编辑器数据，以便将所有内容保存在 Json 中，但另一方面，您将不得不依赖于 30 -party 库将其呈现为 HTML。

要以 Delta 格式使用，您必须使用 setContents() 和 getContents()。将您的数据库中保存为 Delta（查看全屏片段以获得更好的可视化效果）：

let quillEditor = new Quill('#editor', 
  theme: 'snow'
);

quillEditor.on('text-change', function()
  console.clear();
  console.log(quillEditor.getContents().ops);
);

//Retrieve your json from MongoDB
let myDocument = [
    "insert": "Hello "
  ,
  
    "attributes": 
      "bold": true
    ,
    "insert": "World!"
  ,
  
    "insert": "\n"
  
];

quillEditor.setContents(myDocument, );

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">

<div id="editor"></div>

我使用的另一种方法是使用QuillInstance.root.innerHTML 直接从编辑器中检索 HTML，这将允许您在数据库中保存一个直接的 HTML 文件，以便稍后呈现：

let quillEditor = new Quill('#editor', 
  theme: 'snow'
);

quillEditor.on('text-change', function()
  console.clear();
  console.log(quillEditor.root.innerHTML);
);


//Retrieve your json from MongoDB
let myDocument = [
    "insert": "Hello "
  ,
  
    "attributes": 
      "bold": true
    ,
    "insert": "World!"
  ,
  
    "insert": "\n"
  
];

quillEditor.setContents(myDocument);

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">

<div id="editor"></div>

【参考方案2】：

我强烈建议您存储和操作Delta 操作。我们严重依赖 Wisembly Jam 上的 quill，我们使用 ShareDB 操作实时操作并将它们更持久地存储在 PostgreSQL 中。

只需使用quill.getContents() 来检索ops（这是一个操作数组，一个简单的JSON 真的很容易存储）。

然后，当您加载页面时，从您的数据库中检索此 JSON 对象，并使用 quill.setContents() 正确加载它。

这是：

1) 比 HTML 更易于存储 2) 未来证明（如果 Quill 更新和更改内容，它仍然可以正确实现 Delta 格式，不确定它是否会以相同的方式处理 HTML）