Question

所以我正在尝试建立自己的博客，我想要一个用户界面来更新博客，而不是每次都弄乱HTML文件。

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

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

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

Answer 1

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

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

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

这是：

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

Answer 2

quill文档建议您以 Delta 格式操作de editor编辑器数据，这样可以很容易地将所有内容保存在Json中，但另一方面，您将不得不依赖于一个三十方的库，将其呈现为HTML。

要使用Delta格式，您必须使用setContents()和getContents()。将数据库保存为Delta（请参阅FullScreen中的Snippet以获得更好的可视化效果）：

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>

我使用的另一个approuch是使用QuillInstance.root.innerHTML直接从编辑器中检索HTML，这样您就可以在DataBase中保存一个直接的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>

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

2 个答案: