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

Question

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

Answer 1

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

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 2

很简单，通过访问编辑器的 innerHTML：

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

希望这可以帮助！

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); }

Answer 4

如果您只想要在root.innerHTML中编写的内容是更好的选择，因为.container.innerHTML为您提供了.editor类中的许多其他标签。

const myEditor = new Quill('#my-editor', {
    //configuration
});
myEditor.root.innerHTML;

如果您想on更改事件后获取文本，请添加

myEditor.on('text-change', function(delta, oldDelta, source) {
       //on change opration     
});

Answer 5

这个过程很简单，让我来指导你。

初始化和配置：

var quill = new Quill('#editor-container', {
       modules: {
        syntax: true,
        toolbar: '#toolbar-container'
     },
   placeholder: 'Compose an epic...',
   theme: 'snow',
   readOnly: false,
});

现在获取有关更改编辑器数据的内容

quill.on('text-change', function(delta, source) {
   var justHtml = quill.root.innerHTML;
   document.getElementById('output-html').innerHTML = justHtml;
});

HTML 代码：

<div class="ql-snow">
   <div class="ql-editor" id="output-html">
      // the content goes here
   </div>
</div>