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.

Quickstart

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

<!-- 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">
  <div>Hello World!</div>
</div>

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

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor');
  editor.addModule('toolbar', { container: '#toolbar' });
</script>

Downloading Quill

There are a number of ways to the latest or versioned copy of Quill.

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

CDN

<link rel="stylesheet" href="//cdn.quilljs.com/0.16.0/quill.snow.css" />
<script src="//cdn.quilljs.com/0.16.0/quill.min.js"></script>

Local Development

Quill's source is in Coffeescript and utilizes Browserify to organize its files.

Installation

npm install -g grunt-cli
npm install

Building

grunt dist - compile and browserify
grunt server - starts a local server that will build and serve assets on the fly

Testing

All tests assume the local server is running.

grunt test - run tests with phantomjs
grunt test:unit - runs javascript test suite with phantomjs
grunt test:e2e - runs end to end tests with Webdriver + Chrome
grunt test:coverage - run coverage tests using phantomjs
grunt test:karma - runs karma on port 9876

Check out Gruntfile.coffee and config/grunt for more testing options.

Community

Get help or stay up to date.

• Follow @quilljs on Twitter
• Ask questions on Stack Overflow (tag with quill)
• Visit the discussion group
• If a private channel is required, you may also email [e-mail]

Contributing

Bug Reports

Search through Github Issues to see if the bug has already been reported. If so, please comment with any additional information about the bug.

For new issues, create a new issue and tag with the appropriate browser tag. Include as much detail as possible such as:

• Detailed description of faulty behavior
• Affected platforms
• Steps for reproduction
• Failing test case

The more details you provide, the more likely we or someone else will be able to find and fix the bug.

Feature Requests

We welcome feature requests. Please make sure they are within scope of Quill's goals and submit them in Github Issues tagged with the 'feature' tag. The more complete and compelling the request, the more likely it will be implemented. Garnering community support will help as well!

Pull Requests

1. Please check to make sure your plans fall within Quill's scope (likely through Github Issues).
2. Fork Quill
3. Branch off of the 'develop' branch.
4. Implement your changes.
5. Submit a Pull Request.

Pull requests will not be accepted without adhering to the following:

1. Conform to existing coding styles.
2. New functionality are accompanied by tests.
3. Serve a single atomic purpose (add one feature or fix one bug)
4. Introduce only changes that further the PR's singular purpose (ex. do not tweak an unrelated config along with adding your feature).

Important: By issuing a Pull Request you agree to allow the project owners to license your work under the terms of the License.

Thanks

Swift, for providing the npm package name. If you're looking for his blogging engine see v0.1.5-1.

License

BSD 3-clause