如何检索 Quill 文本编辑器的内容

Question

我在 javascript 应用程序中使用 quill 文本编辑器，我需要将文本编辑器的内容检索为包含 HTML 的字符串，但文档有点稀疏这个主题。

Answer 1

访问编辑器的 innerHTML 非常简单：

var quill = new Quill('#editor', {
    theme: 'snow'
});
// ....
var editor_content = quill.container.innerHTML // or quill.container.firstChild.innerHTML could also work

希望对您有所帮助！

Answer 2

取决于你想要得到什么，这里有一个例子展示了几种方法：

http://codepen.io/k3no/pen/amwpqk

var delta = editor.getContents();
var text = editor.getText();
var justHtml = editor.root.innerHTML;
preciousContent.innerHTML = JSON.stringify(delta);
justTextContent.innerHTML = text;
justHtmlContent.innerHTML = justHtml;

Answer 3

这对于从编辑器中获取文本并回答 OP 的问题非常有用，但文本仍然没有显示在发布的表单中。其他人可能会遇到同样的问题，所以我在这里发布解决方案。

我不得不手动将编辑器中的文本添加到表单的 dom。

document.getElementById('formSave').addEventListener('submit', validate);
function validate(e) {
  let blogHtml = editor.root.innerHTML;
  // do validations and do e.preventDefault() on fail, but if valid, then...
  let input = document.createElement('input');
  input.setAttribute('name', 'blog');
  input.setAttribute('value', blogHtml);
  input.setAttribute('type', 'text')
  document.getElementById('formSave').appendChild(input);
}

如何检索 Quill 文本编辑器的内容

How do I retrieve the contents of a Quill text editor

javascript

quill