Quill 1.0 has arrived. It was just two years ago that Quill made its public debut as an open source project. Today, it can be found in applications and products of all sizes, ranging from personal projects and promising startups, to established public companies.
Quill is designed as an easy to use editor, to support content creation across the web. It is built on top of consistent and predictable constructs, exposed through a powerful API. With coverage across both ends of the complexity spectrum, Quill aims to be the defacto rich text editor for the web.
In the 111 releases, Quill has iterated relentlessly towards this goal. It has stabilized its API, moved essential internal implementations into customizable modules, and exposed its document model for users to define and add entirely new formats and content.Read more
Today Quill enters its highly anticipated 1.0 release candidacy. Through the 11 beta releases, over 300 reported bugs were fixed, and almost 1000 commits were made. Thank you to all contributors who pitched in, in ways small and large, isolated and numerous, either reporting issues, committing code, or otherwise helping out the community!
The API should now be considered stable, with only backwards compatible bug fixes to look forward to. No additional new features are planned until after the official 1.0 release.Read more
Today Quill is ready for its first beta preview of 1.0. This is the biggest rewrite to Quill since its inception and enables many new possibilities not available in previous versions of Quill, nor any other editor. The code is as always available on Github and through npm:
npm install firstname.lastname@example.org
The skeleton of a new documentation site is also being built out at beta.quilljs.com. Whereas the current site focuses on being a referential resource, the new site will also be a guide to provide insight on approaching different customization goals. There is also an interactive playground to try out various configurations and explore the API.Read more
What this means is its design and API is reasonably stable and the adventurous can now take an early look. The latest Quill source is already using Parchment to implement its formatting and content capabilities, and its integration would be a helpful example of Parchment in action. Of course, this is in addition to Parchment’s own documentation.Read more
Quill launched with the ambitious goal of becoming the rich text editor for the web, being both easy to use for drop in use cases, and powerful enough for complex ones. Its current API is core to those goals.
In the past months, much effort has been placed into providing even greater means for customization, particularly the editor’s contents. With this nearing completion, Quill is approaching its 1.0 coming of age.
A full introduction and guide to Parchment is still forthcoming, but in short it is a new document model for Quill. An editor’s document model is an important abstraction over the DOM that allows the editor and API users to reason about its contents through a much simpler yet more expressive interface than directly interacting with the browser. For Quill, this enables an elegant solution to the longstanding problem of format customization.Read more
Customizability is core to Quill’s ethos and the new v0.19 release is a big step towards fulfilling that mission. In previous versions Quill utilized an iframe to contain the editor. This unfortunately prevented expected browser behaviors and made it difficult for developers to access and extend Quill1. Its removal is the biggest change in v0.19 and some rippling effects are expected. They, and other changes for v0.19, are summarized here.
With iframes gone it is now much easier to customize the styling of the Quill editor and unecessary for Quill to do so on your behalf in most cases. This leads to a few changes:
You can now pass
false into the style config to prevent Quill from injecting any
<style> tags. No change is necessary if the default behavior is preferred, but this added option makes it easier and more efficient for those that prefer to completely control styling with stylesheets. For this latter route,
quill.base.css is now included in releases and the CDN.
The new rich text type is now live and being used in Quill v0.18.0. It is a big step towards 1.0 and will be the way documents and changes are represented going forward. In most cases this update is non-disruptive and an upgrade can be a simple increment of the version number1.
However, if you happened to be storing the old Delta format, here’s a short guide on how to migrate.
The main relevant differences between the old and new Deltas are:
Part of providing a complete API in Quill is providing events for when and what changes occur in the editor. Those changes are currently represented by a Delta object, which aims to be intuitive, human-readable, and expressive for any change or document that might need to represented. Over the past few weeks I’ve been working on a new format that better fulfills those goals and addresses the challenges in the current format.
Documentation for the new Delta format can be found in its own Github repository but I will go over some of the rationale behind some of the changes in this post.Read more
Note: An updated guide for 1.0 and ES6 is available here.
Quill’s core strength as an editor is its rich API and powerful customization capabilities. One of the best ways to customize Quill is with a module. A module is a simple way to augment Quill’s functionality. For the purpose of this guide, we will walk through one way to build a word counter module, a commonly found feature in many word processors.
At its core a word counter simply counts the number of words in the editor and displays this value in some UI. Thus we need to:
Let’s jump straight in with a complete example!Read more
Quill now has an offical Content Distribution Network so you can have access to a reliable, high-speed host for the library. To include a file:
<link rel="stylesheet" href="//cdn.quilljs.com/0.16.0/quill.snow.css" />
You can also use “latest” as the version: