DOCSEARCHbyAlgolia
Submit Docs

Quill Rich Text Editor

website·Indexed 43 days ago

https://quilljs.com/

A powerful, API-driven rich text editor designed for customization and extension. It features a modular architecture, the Delta format for describing content and changes, and a document model powered by Parchment. Documentation covers installation, configuration, themes, and official modules such as Toolbar, Keyboard, History, Clipboard, and Syntax Highlighter.

Tokens
15.3K
Snippets
91
Records
113
Agent score
75%

What's inside Quill

  1. Overview of the Quill Clipboard Module

    The Clipboard module handles copy, cut, and paste operations between the Quill editor and external applications. It interprets pasted HTML by traversing the DOM tree in post-order and building a Delta representation. Developers can customize how specific HTML elements or node types are interpreted by adding custom matcher functions.

  2. Understand the Parchment document model in Quill

    Quill uses Parchment to maintain a consistent document model as a tree of nodes called 'Blots'. Blots are abstractions over DOM nodes. To ensure a canonical and compact representation, Quill optimizes the DOM tree by unwrapping unnecessary nodes (e.g., removing a <span> if it doesn't provide formatting). Because of these constraints, Quill does not support arbitrary DOM trees or direct HTML changes; instead, it requires changes to be made through the Parchment model.

  3. Understand the Quill Delta format

    Deltas are a JSON-based format used to describe Quill document contents and changes. A Delta represents a sequence of operations (ops) that transform a document. When describing a full document, a Delta is treated as a set of instructions applied to an empty document. Deltas are suitable for Operational Transform (OT) and real-time collaborative editing. It is recommended to use the chainable insert(), delete(), and retain() methods from the standalone delta library rather than constructing JSON by hand.

  4. Understand Quill's API-driven design for text manipulation

    Unlike editors that rely on the DOM tree, Quill uses a text-centric model where characters are the unit of measure. This allows developers to query and modify content using arbitrary indexes and lengths without manually traversing DOM nodes or parsing HTML. For example, checking if text is bold is done via API calls like getFormat() rather than searching for <b> or <strong> tags. Changes are reported via an event API in JSON format.

  5. Manage Quill modules and functionality

    Quill uses a modular architecture. You can add, remove, or replace modules via the modules configuration object. Some modules (Clipboard, Keyboard, and History) are essential for core functionality. To replace a core module's behavior, inherit from the existing module and overwrite the specific methods you wish to change, ensuring you maintain the same API interface.
    const quill = new Quill('#editor', {
  modules: {
    toolbar: false    // Disable the toolbar included by default in the Snow theme
  },
  theme: 'snow'
});

  6. Understand the Quill Delta format structure

    Quill uses a format called Deltas to describe rich text. A Delta is an array of objects (Operations). To ensure predictability and ease of comparison, Deltas must follow two primary constraints:

    1. Compact: A Delta must be represented in its most concise form. For example, two adjacent text segments with the same attributes must be merged into one.
    2. Canonical: There must be only one way to represent a specific piece of content. This allows developers to use deep comparison to determine if two Deltas are equal. For example, Quill uses six-character hex values for colors and always uses \n for newlines.
    // Example of a basic Delta representing formatted text
const content = [
  { insert: 'Hello' },
  { insert: 'World', attributes: { bold: true } }
];

  7. Implement a Quill theme in your editor

    Quill provides two officially supported themes: 'Snow' (a clean, flat toolbar theme) and 'Bubble' (a simple tooltip-based theme). To apply a theme, include the corresponding CSS stylesheet in your HTML and specify the theme property in the Quill configuration object during initialization.
    <!-- Example using the Bubble theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.bubble.css" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>

<script>
  const quill = new Quill('#editor', {
    theme: 'bubble' // Use 'snow' or 'bubble'
  });
</script>

  8. Update Keyboard bindings for Quill 2.0

    Keyboard binding behavior has changed in version 2.0:

    • The key binding is now case-sensitive. Modifiers (like Shift) are taken into account to determine the case.
    • The key property now supports an array of keys, allowing a single handler to be bound to multiple shortcuts.
    • Keyboard event handlers now receive the native keyboard event object as an argument.

  9. Customize the visual appearance of Quill themes

    Quill themes are primarily controlled via CSS. To customize the visual look, override the existing CSS rules by inspecting elements in the browser developer console to identify the specific rules affecting the UI. For functional UI customizations, such as modifying the toolbar, use the respective module configurations (e.g., the Toolbar module).

  10. Install Quill via CDN (Full Build)

    The full build is the easiest way to get started. It includes the core Quill library, common themes, formats, and modules. To use it, include the quill.js script and the stylesheet for your chosen theme (e.g., 'snow'). The CDN build exposes Quill to the global window object.
    <!-- Include stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" rel="stylesheet">

<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>

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

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

  11. Use the 'retain' operation to preserve and format text

    The retain operation tells the editor to keep a specific number of characters from the current document position. If the retain operation includes an attributes object, it applies those formats to the retained text. This replaces the need for explicit indexes and lengths, as the Delta describes the document as a sequence of changes.
    // Retain 5 characters and make them bold, then insert a space
const change = [
  { retain: 5, attributes: { bold: true } },
  { insert: ' ' }
];

  12. Implement Quill modules using ES6 classes

    While any function can be registered as a Quill module, implementing a module as an ES6 class or ES5 constructor is recommended when you need to maintain internal state or provide a public API that can be accessed directly from the module instance.