quill

What is quill?

Quill is a modern WYSIWYG editor built for compatibility and extensibility. It allows for rich text editing with a customizable toolbar and API. It's designed to be easy to use and integrate into web applications.

What are quill's main functionalities?

Basic Text Formatting

This code initializes a Quill editor with basic text formatting options such as bold, italic, underline, and strike-through, as well as blockquote and code block formatting.

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

Adding Custom Toolbar Buttons

This code demonstrates how to add a custom button to the Quill toolbar and define a custom event handler for it.

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar',
      handlers: {
        'customButton': function() {
          console.log('Custom button clicked!');
        }
      }
    }
  },
  theme: 'snow'
});

// Assuming there is a button with class 'ql-customButton' in the toolbar

Handling Content Changes

This code sets up an event listener to log changes to the content of the Quill editor, providing the delta of the change.

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

quill.on('text-change', function(delta, oldDelta, source) {
  console.log('Text was changed!', delta);
});

Setting and Getting Content

This code shows how to set the content of a Quill editor using a delta and how to retrieve the content as a delta.

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

// Set content
var delta = quill.clipboard.convert('<h1>Quill Rocks</h1>');
quill.setContents(delta);

// Get content
var content = quill.getContents();
console.log(content);

Other packages similar to quill

draft-js

Draft.js is a framework for building rich text editors in React, providing a mutable model with a declarative API. It differs from Quill in that it's React-specific and offers a more complex API that allows for a higher degree of customization.

slate

Slate is a completely customizable framework for building rich text editors. Unlike Quill, which uses a predefined set of modules and formats, Slate provides the building blocks to write completely custom editors from scratch, which can be both a powerful and complex endeavor.

ckeditor

CKEditor is a rich text editor with a wide range of plugins and features. It has been around for a long time and offers a different set of features compared to Quill, such as real-time collaboration and a larger set of out-of-the-box plugins.

tinymce

TinyMCE is a web-based Javascript WYSIWYG editor control. It is similar to Quill in providing rich text editing capabilities but differs in its extensive plugin ecosystem and enterprise features like PowerPaste and Spell Checker Pro.

README

Quill Rich Text Editor

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and open sourced by Salesforce.com.

To get started, check out the Quill Github Page or jump straight into the demo.

Useful Links

• Demo
• Documentation
• Contributing
• Local Development

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

<!-- Include Quill stylesheet -->
<link href="http://cdn.quilljs.com/latest/quill.snow.css" rel="stylesheet">

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

<!-- Include the Quill library -->
<script src="http://cdn.quilljs.com/latest/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
</script>

Download

• npm - npm install quill
• tar - https://github.com/quilljs/quill/releases

CDN

<link href="//cdn.quilljs.com/0.19.10/quill.css" rel="stylesheet">
<link href="//cdn.quilljs.com/0.19.10/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/0.19.10/quill.bubble.css" rel="stylesheet">
<script src="//cdn.quilljs.com/0.19.10/quill.js" type="text/javascript"></script>
<script src="//cdn.quilljs.com/0.19.10/quill.min.js" type="text/javascript"></script>

Community

Get help or stay up to date.

• Contribute on Issues
• Follow @quilljs on Twitter
• Ask questions on Stack Overflow
• If privacy is required, email [e-mail]

License

BSD 3-clause

Changelog

v1.0.0-beta.2 (2016-05-15)

Weekly beta preview release. Major emphasis on keyboard API and customization.

Breaking Changes

• Rename code highlighter module to syntax
• Clipboard matchers specified in configuration appends to instead of replaces default matchers
• Change video embed to use <iframe> instead of <video> enabling Youtube/Vimeo links

Features

• Add contextual keyboard listeners
• Allow indent format to take +1/-1 in addition to target indent level
• Shortcuts for creating ordered or bulleted lists
• Autofill mailto for email links #278
• Enter does not continue header format #540

Bug Fixes

• Allow native handling of backspace #473 #548 #565
• removeFormat() removes last line block formats #649
• Fix text direction icon directon #654
• Fix text insertion into root scroll #655
• Fix focusing on placeholder text in FF #656
• Hide placeholder on formatted line #657
• Fix selection handling on focus and blur #664

Thanks to @anovi, @benbro, @jbrowning, @kei-ito, @quentez, @u9520107 for their contributions to this release!

All changes