How do I retrieve the contents of a Quill text editor

Question

I am using the quill text editor in a javascript app and I need to retrieve the contents of the text editor as a string with the HTML included but the docs are a little sparse on this subject.

Answer 1

Depends what you want to get, here's an example showing a few ways:

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

Quite simply by accessing the editor's innerHTML:

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

Hope this helps!

Answer 3

This was great for getting the text from the editor and answers OP's question, but the text still wasn't showing up in the posted form. Others may come here with the same problem, so I'm posting the solution to that here.

I had to manually add the text from the editor to the form's 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

if you want just what you written inside root.innerHTML is better option because .container.innerHTMLgive you bunch of other tags that is inside the .editor class.

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

add if you want to get the text after change use on event

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

Answer 5

This is so easy process, let me guide you.

initialize and config:

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

Now get content on changing the editor data

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

HTML code:

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