Powerful rich-text editor Quilljs

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.

Installation

npm

npm install [email protected]

<!-- 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

HTML

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

Javascript

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

API

GET HTML

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