Powerful rich-text editor Quilljs

3949   24 January 2020

Quilljs is a powerful and feature-rich Open source WYSIWYG editor for Javascript, It is highly customizable and easy to use.

To use Quill WYSIWYG editor in your project, you only need to add quilljs stylesheets and javascript to your project and then instantiate Quill object with target element and options.



npm install [email protected]
For Browser (CDN)

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

Instantiating Quilljs Class

element[, options]);

  • element - Select target element by CSS selector like tag name, id, class, etc.
  • options -  Options for the editor like the theme, modules, etc.

Basic example


<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>


var quill = new Quill('#editor', {
    theme: 'snow'



There is no official guildelines how to get rich-text from editor in HTML, perhaps most of developer using these methods to get html contents.

  • quill.root.innerHTML
  • document.querySelector(".ql-editor").innerHTM
  • quill.container.firstChild.innerHTML

View More

Related Elements