FriconiX
Free collection of beautiful vector icons for your web pages.

How to get HTML content from Quill editor?

Introduction

Quill is currently my favorite rich text editor. The Quill content is described by the Deltas format. This format is a subset of JSON, well suited for many applications. But you sometime need to get raw HTML content for publishing on a web page or sending content via email.

This page explains how to get raw HTML from JS or post the content of the form. The following has been tested with Quill version 1.3.6.

Get HTML

Many options exist to get HTML content from Quill editor.

You can try to convert Delta with a JavaScript library:

You can parse the Delta format from server side with one of these libraries:

I tried many of them, an no one were satisfying. I finaly found the simplest and best option on GitHub. From JavaScript use:

var html = quill.root.innerHTML;

You'll get the raw html without Quill classes. I made a JSFiddle to show how it works. Try it online, modify the content in the editor, HTML code should update automaticaly:

Post HTML in a form

If you need to post HTML content in a HTML form, I suggest to create a hidden field to copy the HTML content inside when the submit button is clicked:

<input type="hidden" name="quill-html" id="quill-html">

When the submit button is clicked, copy the HTML code from Quill to the hidden form:

// When the submit button is clicked, update output
$('#btn-submit').on('click', () => { 
    // Get HTML content
    var html = quill.root.innerHTML;

    // Copy HTML content in hidden form
    $('#quill-html').val( html )

    // Post form
    myForm.submit();
})

If you store the content in a database, I recommand to store the Delta format to keep compatibility with the Quill editor.

See also


Last update : 03/01/2020