如何在 Node.js 和 MongoDB 中正确使用 Quill？

Question

我正在尝试建立一个博客，并希望有一个用户界面来更新博客，而不是每次都要操作HTML文件。

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

然后在需要显示时，从数据库中检索它，然后使用quill-render（https://www.npmjs.com/package/quill-render）动态呈现它。

问题是，由于我不知道quill的设计原理，所以是否有人能告诉我这样做是否正确？或者更好的方法是让quill以某种方式将内容导出为HTML文件，然后将其存储，然后简单地重定向到它？谢谢。

- Sam Min Wong

Answer 1

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

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

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

这是：

1）比HTML更小的存储方式 2）未来可靠（如果Quill更新并更改事物，仍将正确实现Delta格式，不确定它是否会以同样的方式处理HTML）

- guillaumepotier

Answer 2

Quill 的文档建议您使用 Delta 格式来操作编辑器数据，这样可以轻松地将所有内容保存为 Json，但另一方面，您将不得不依赖于第三方库将其呈现为 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>

另一种我使用过的方法是直接从编辑器中检索HTML，使用QuillInstance.root.innerHTML，这将允许您在数据库中保存一个直接的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>

- Matheus Cuba