Quill to HTML

How to convert Quill editor content to HTML.

by zxzc0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.bubble.css">
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
<small>More info on <a href="https://lucidar.me/en/web-dev/how-to-get-html-content%20from-quill-rich-editor/" target="_blank">my blog</a></small>.
<div id="editor-container"><h1>Quill to HTML</h1>
➡️  Modify this content to update HTML output 🔻.
</div>

<pre><code id="output-html"></code></pre>

CSS

#editor-container {
    max-height: 200px;
    overflow-y: auto;
    font-size: 1rem;
}

JavaScript

// Initialize QUill editor
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, 3, 4, 5, 6,  false] }],
      ['bold', 'italic', 'underline','strike'],
      [{
        'color': []
      }],
      ['image', 'code-block'],
      ['link'],
      [{ 'script': 'sub'}, { 'script': 'super' }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['clean']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});


quill.on('text-change', function(delta, source) {
	updateHtmlOutput()
})

// When the convert button is clicked, update output
$('#btn-convert').on('click', () => { updateHtmlOutput() })

// Return the HTML content of the editor
function getQuillHtml() { return quill.root.innerHTML; }

// Highlight code output
function updateHighlight() { hljs.highlightBlock( document.querySelector('#output-html') ) }


function updateHtmlOutput()
{
	let html = getQuillHtml();
    console.log ( html );
    document.getElementById('output-html').innerText = html;
    updateHighlight();
}


updateHtmlOutput()