Quill

https://quilljs.com/docs/
Admin
Quill is a powerful, flexible rich text editor that enables developers to build customizable...
Tokens:52,102
Snippets:475
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### getModule usage example

Source: https://quilljs.com/docs/api

Example of retrieving the toolbar module from the editor.

```javascript
const toolbar = quill.getModule('toolbar');
```

--------------------------------

### Initialize Quill with toolbar and snow theme

Source: https://quilljs.com/docs/why-quill

Creates a Quill editor instance on the '#editor' element, enabling the toolbar module and using the 'snow' theme. This is the minimal setup to get started with Quill's default features.

```javascript
const quill = new Quill('#editor', {
  modules: { toolbar: true },
  theme: 'snow'
});
```

--------------------------------

### on method example

Source: https://quilljs.com/docs/api

Example of using the on method to listen for the text-change event.

```javascript
quill.on('text-change', () => {
  console.log('Text change!');
});
```

--------------------------------

### once method example

Source: https://quilljs.com/docs/api

Example of using the once method to listen for the first text-change event.

```javascript
quill.once('text-change', () => {
  console.log('First text change!');
});
```

--------------------------------

### enable usage examples

Source: https://quilljs.com/docs/api

Examples of enabling and disabling user input with quill.enable().

```javascript
quill.enable();
quill.enable(false);   // Disables user input
```

--------------------------------

### addContainer usage example

Source: https://quilljs.com/docs/api

Example of adding a container with class 'ql-custom' to the editor.

```javascript
const container = quill.addContainer('ql-custom');
```

--------------------------------

### formatLine method examples

Source: https://quilljs.com/docs/api

Examples of using formatLine to align lines. The first example right-aligns the first line, the second center-aligns both lines.

```javascript
quill.setText('Hello\nWorld!\n');


quill.formatLine(1, 2, 'align', 'right');   // right aligns the first line
quill.formatLine(4, 4, 'align', 'center');  // center aligns both lines
```

--------------------------------

### ImageBlot with Quill.register (complete example)

Source: https://quilljs.com/docs/guides/cloning-medium-with-parchment

This is the full ImageBlot example from the interactive editor, including the Quill.register(ImageBlot) call. It uses let instead of const and has slightly different formatting compared to the first example.

```javascript
const BlockEmbed = Quill.import('blots/block/embed');

class ImageBlot extends BlockEmbed {
  static blotName = 'image';
  static tagName = 'img';

  static create(value) {
    let node = super.create();
    node.setAttribute('alt', value.alt);
    node.setAttribute('src', value.url);
    return node;
  }
  
  static value(node) {
    return {
      alt: node.getAttribute('alt'),
      url: node.getAttribute('src')
    };
  }
}

Quill.register(ImageBlot);

```

--------------------------------

### CDN Full Build: Include script and stylesheet

Source: https://quilljs.com/docs/installation

Include the Quill full build script and the Snow theme stylesheet from jsDelivr CDN. This is the easiest way to get started without build steps.

```html
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
```

--------------------------------

### formatText method examples

Source: https://quilljs.com/docs/api

Examples of using formatText to apply inline formatting. The examples bold 'hello', then un-bold and color it, and right-align the line by targeting the newline character.

```javascript
quill.setText('Hello\nWorld!\n');


quill.formatText(0, 5, 'bold', true);      // bolds 'hello'


quill.formatText(0, 5, {                   // unbolds 'hello' and set its color to blue
  'bold': false,
  'color': 'rgb(0, 0, 255)'
});


quill.formatText(5, 1, 'align', 'right');  // right aligns the 'hello' line
```

--------------------------------

### format method examples

Source: https://quilljs.com/docs/api

Examples of using the format method to apply formatting at the current selection. If the selection is a cursor, the format becomes active for the next typed character.

```javascript
quill.format('color', 'red');
quill.format('align', 'right');
```

--------------------------------

### getLines usage example

Source: https://quilljs.com/docs/api

Shows how to get lines after formatting a list. The comment explains that the array contains a ListItem and Block Blot representing the first two lines.

```javascript
quill.setText('Hello\nGood\nWorld!');
quill.formatLine(1, 1, 'list', 'bullet');


let lines = quill.getLines(2, 5);
// array with a ListItem and Block Blot,
// representing the first two lines
```

--------------------------------

### Retain and delete operations example

Source: https://quilljs.com/docs/delta

Demonstrates a Delta that uses retain operations to modify formatting and insert text, and a delete operation to remove characters. The example starts from a document with 'Gandalf the Grey' and transforms it to 'Gandalf the White'.

```json
// {
//   ops: [
//     { insert: 'Gandalf', attributes: { bold: true } },
//     { insert: ' the ' },
//     { insert: 'Grey', attributes: { color: '#cccccc' } }
//   ]
// }


{
  ops: [
    // Unbold and italicize "Gandalf"
    { retain: 7, attributes: { bold: null, italic: true } },


    // Keep " the " as is
    { retain: 5 },


    // Insert "White" formatted with color #fff
    { insert: 'White', attributes: { color: '#fff' } },


    // Delete "Grey"
    { delete: 4 }
  ]
}
```

--------------------------------

### getLine usage example

Source: https://quilljs.com/docs/api

Shows how to get a line blot after setting multi-line text. The comment explains that the line should be a Block Blot representing the second line and offset 1.

```javascript
quill.setText('Hello\nWorld!');


let [line, offset] = quill.getLine(7);
// line should be a Block Blot representing the 2nd "World!" line
// offset should be 1, since the returned line started at index 6
```

--------------------------------

### Word counter module example (index.html)

Source: https://quilljs.com/docs/guides/building-a-custom-module

HTML structure for the word counter example. Includes the editor container, a counter display, and the script tag for the module.

```html
<link href="/index.css" rel="stylesheet">

<div id="editor"></div>
<div id="counter">0</div>

<script src="/index.js"></script>
```

--------------------------------

### Basic HTML setup with textarea and buttons

Source: https://quilljs.com/docs/guides/cloning-medium-with-parchment

Initial HTML structure with a textarea for the editor and buttons for formatting controls. Includes links to styles.css and index.js.

```html
<link href="/styles.css" rel="stylesheet">
  

<div id="tooltip-controls">
<button id="bold-button"><i class="fa fa-bold"></i></button>
<button id="italic-button"><i class="fa fa-italic"></i></button>
<button id="link-button"><i class="fa fa-link"></i></button>
<button id="blockquote-button"><i class="fa fa-quote-right"></i></button>
<button id="header-1-button"><i class="fa fa-header"><sub>1</sub></i></button>
<button id="header-2-button"><i class="fa fa-header"><sub>2</sub></i></button>
</div>
<div id="sidebar-controls">
<button id="image-button"><i class="fa fa-camera"></i></button>
<button id="video-button"><i class="fa fa-play"></i></button>
<button id="tweet-button"><i class="fa fa-twitter"></i></button>
<button id="divider-button"><i class="fa fa-minus"></i></button>
</div>
  

<textarea id="editor">Tell your story...</textarea>
  

<script type="module" src="/index.js"></script>
```

--------------------------------

### Redo Last Undo Example

Source: https://quilljs.com/docs/modules/history

Example usage of the redo method.

```javascript
quill.history.redo();
```

--------------------------------

### Quill.find usage examples

Source: https://quilljs.com/docs/api

Shows how to use Quill.find to get the Quill instance from a container, get a blot from a link node, and find the Quill instance from a blot's scroll DOM node.

```javascript
const container = document.querySelector('#container');
const quill = new Quill(container);
console.log(Quill.find(container) === quill); // Should be true


quill.insertText(0, 'Hello', 'link', 'https://world.com');
const linkNode = document.querySelector('#container a');
const linkBlot = Quill.find(linkNode);


// Find Quill instance from a blot
console.log(Quill.find(linkBlot.scroll.domNode.parentElement));
```

--------------------------------

### focus usage examples

Source: https://quilljs.com/docs/api

Examples of focusing the editor with and without scrolling the selection into view.

```javascript
// Focus the editor, and scroll the selection into view
quill.focus();


// Focus the editor, but don't scroll
quill.focus({ preventScroll: true });
```

--------------------------------

### getFormat method examples

Source: https://quilljs.com/docs/api

Examples showing how getFormat returns common formatting. It demonstrates truthy values, arrays for differing values, and how selection and active formats affect the result.

```javascript
quill.setText('Hello World!');
quill.formatText(0, 2, 'bold', true);
quill.formatText(1, 2, 'italic', true);
quill.getFormat(0, 2);   // { bold: true }
quill.getFormat(1, 1);   // { bold: true, italic: true }


quill.formatText(0, 2, 'color', 'red');
quill.formatText(2, 1, 'color', 'blue');
quill.getFormat(0, 3);   // { color: ['red', 'blue'] }


quill.setSelection(3);
quill.getFormat();       // { italic: true, color: 'blue' }


quill.format('strike', true);
quill.getFormat();       // { italic: true, color: 'blue', strike: true }


quill.formatLine(0, 1, 'align', 'right');
quill.getFormat();       // { italic: true, color: 'blue', strike: true,
                         //   align: 'right' }
```

--------------------------------

### insertText examples

Source: https://quilljs.com/docs/api

Two examples of inserting text with formatting: one with a single format and one with multiple formats.

```javascript
quill.insertText(0, 'Hello', 'bold', true);
```

```javascript
quill.insertText(5, 'Quill', {
  color: '#ffff00',
  italic: true,
});
```

--------------------------------

### getIndex usage example

Source: https://quilljs.com/docs/api

Shows how to get the index of a line blot obtained from getLine. The comment notes that index + offset should equal the original index.

```javascript
let [line, offset] = quill.getLine(10);
let index = quill.getIndex(line); // index + offset should == 10
```

--------------------------------

### getLeaf usage example

Source: https://quilljs.com/docs/api

Shows how to get a leaf blot after formatting text. The comment explains that the leaf should be a Text Blot with value 'Good' and offset 1.

```javascript
quill.setText('Hello Good World!');
quill.formatText(6, 4, 'bold', true);


let [leaf, offset] = quill.getLeaf(7);
// leaf should be a Text Blot with value "Good"
// offset should be 1, since the returned leaf started at index 6
```

--------------------------------

### scrollRectIntoView example 1

Source: https://quilljs.com/docs/api

Example of scrolling the editor to reveal a range using selection.getBounds and scrollRectIntoView.

```javascript
// Scroll the editor to reveal the range of { index: 20, length: 5 }
const bounds = this.selection.getBounds(20, 5);
if (bounds) {
  quill.scrollRectIntoView(bounds);
}
```

--------------------------------

### Quill.register custom module example

Source: https://quilljs.com/docs/api

Example of registering a custom module by extending the core Module class and using the 'modules/' path prefix.

```javascript
const Module = Quill.import('core/module');


class CustomModule extends Module {}


Quill.register('modules/custom-module', CustomModule);
```

--------------------------------

### update usage example

Source: https://quilljs.com/docs/api

Example of calling quill.update() to synchronously check for user updates.

```javascript
quill.update();
```

--------------------------------

### VideoBlot with Quill.register (complete example)

Source: https://quilljs.com/docs/guides/cloning-medium-with-parchment

This is the full VideoBlot example from the interactive editor, including the Quill.register(VideoBlot) call. It uses let instead of const and has slightly different formatting compared to the earlier definition.

```javascript
const BlockEmbed = Quill.import('blots/block/embed');

class VideoBlot extends BlockEmbed {
  static blotName = 'video';
  static tagName = 'iframe';

  static create(url) {
    let node = super.create();
    node.setAttribute('src', url);
    node.setAttribute('frameborder', '0');
    node.setAttribute('allowfullscreen', true);
    return node;
  }
  
  static formats(node) {
    let format = {};
    if (node.hasAttribute('height')) {
      format.height = node.getAttribute('height');
    }
    if (node.hasAttribute('width')) {
      format.width = node.getAttribute('width');
    }
    return format;
  }
  
  static value(node) {
    return node.getAttribute('src');
  }
  
  format(name, value) {
    if (name === 'height' || name === 'width') {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name, value);
      }
    } else {
      super.format(name, value);
    }
  }
}

Quill.register(VideoBlot);

```

--------------------------------

### Undo Last Change Example

Source: https://quilljs.com/docs/modules/history

Example usage of the undo method.

```javascript
quill.history.undo();
```

--------------------------------

### scrollRectIntoView example 2

Source: https://quilljs.com/docs/api

Example of creating a Quill editor, setting text, and scrolling to a specific line using scrollRectIntoView.

```javascript
let text = "";
for (let i = 0; i < 100; i += 1) {
  text += `line ${i + 1}\n`;
}

const quill = new Quill('#editor', { theme: 'snow' });
quill.setText(text);

const target = 'line 50';
const bounds = quill.selection.getBounds(
  text.indexOf(target),
  target.length
);
if (bounds) {
  quill.scrollRectIntoView(bounds);
}
```

--------------------------------

### selection-change event example

Source: https://quilljs.com/docs/api

Example of listening to the selection-change event. It logs the cursor position or highlighted text, and handles the case when the selection is lost.

```javascript
quill.on('selection-change', (range, oldRange, source) => {
  if (range) {
    if (range.length == 0) {
      console.log('User cursor is on', range.index);
    } else {
      const text = quill.getText(range.index, range.length);
      console.log('User has highlighted', text);
    }
  } else {
    console.log('Cursor not in the editor');
  }
});
```

--------------------------------

### Use npm package for highlight.js

Source: https://quilljs.com/docs/modules/syntax

When installing highlight.js as an npm package, pass it to the syntax module as an option instead of relying on the global window object.

```javascript
import Quill from 'quill';
import hljs from 'highlight.js';


const quill = new Quill('#editor', {
  modules: {
    syntax: { hljs },
  },
});
```

--------------------------------

### editor-change event example

Source: https://quilljs.com/docs/api

Example of listening to the editor-change event and checking the event name to handle text-change or selection-change.

```javascript
quill.on('editor-change', (eventName, ...args) => {
  if (eventName === 'text-change') {
    // args[0] will be delta
  } else if (eventName === 'selection-change') {
    // args[0] will be old range
  }
});
```

--------------------------------

### Context object with format conditions

Source: https://quilljs.com/docs/modules/keyboard

Shows an example context object for the 'format' option, where all specified conditions must be met. The format property of the context parameter will be an Object of all current active formats.

```javascript
const context = {
  format: {
    list: true,       // must be on a list, but can be any value
    script: 'super',  // must be exactly 'super', 'sub' will not suffice
    link: false       // cannot be in any link
  }
};
```

--------------------------------

### getBounds usage example

Source: https://quilljs.com/docs/api

Example of using getBounds to retrieve the pixel position of a selection at index 7 after setting text. The comment shows the returned object.

```javascript
quill.setText('Hello\nWorld\n');
quill.getBounds(7); // Returns { height: 15, width: 0, left: 27, top: 31 }
```

--------------------------------

### text-change event example

Source: https://quilljs.com/docs/api

Example of listening to the text-change event and checking the source to determine if the change was triggered by an API call or a user action.

```javascript
quill.on('text-change', (delta, oldDelta, source) => {
  if (source == 'api') {
    console.log('An API call triggered this change.');
  } else if (source == 'user') {
    console.log('A user action triggered this change.');
  }
});
```

--------------------------------

### npm: Install Quill package

Source: https://quilljs.com/docs/installation

Install Quill v2.0.3 via npm. Recommended for projects using bundlers like Webpack or Vite.

```bash
npm install quill@2.0.3
```

--------------------------------

### setSelection usage example

Source: https://quilljs.com/docs/api

Example of using setSelection to set the selection to index 0 with length 5.

```javascript
quill.setSelection(0, 5);
```

--------------------------------

### addMatcher usage examples

Source: https://quilljs.com/docs/modules/clipboard

Two examples: one matching text nodes to insert their data, and another matching <b> tags to apply bold formatting via compose. Matchers using nodeType are called before selector matchers.

```javascript
quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
  return new Delta().insert(node.data);
});
```

```javascript
// Interpret a <b> tag as bold
quill.clipboard.addMatcher('B', (node, delta) => {
  return delta.compose(new Delta().retain(delta.length(), { bold: true }));
});
```

--------------------------------

### getContents example

Source: https://quilljs.com/docs/api

Retrieves the editor contents as a Delta.

```javascript
const delta = quill.getContents();
```

--------------------------------

### Quill.import usage examples

Source: https://quilljs.com/docs/api

Examples of importing Parchment, Delta, a toolbar module, and a link format. Note that Quill.import() does not load scripts over the network; it returns the module from the Quill library without side effects.

```javascript
const Parchment = Quill.import('parchment');
const Delta = Quill.import('delta');


const Toolbar = Quill.import('modules/toolbar');
const Link = Quill.import('formats/link');
// Similar to ES6 syntax `import Link from 'quill/formats/link';`
```

--------------------------------

### Example code block with language selection

Source: https://quilljs.com/docs/modules/syntax

An example code block displayed in the editor, with a language selector showing JavaScript. The code is a simple console.log statement.

```javascript
const language = "JavaScript";
console.log("I love " + language + "!");
```

--------------------------------

### Example: Applying a Delta with updateContents

Source: https://quilljs.com/docs/api

Example usage of updateContents with a Delta to retain, delete, and insert content, and apply bold formatting. The comment shows the expected editor content before and after the operation.

```javascript
// Assuming editor currently contains [{ insert: 'Hello World!' }]
quill.updateContents(new Delta()
  .retain(6)                  // Keep 'Hello '
  .delete(5)                  // 'World' is deleted
  .insert('Quill')
  .retain(1, { bold: true })  // Apply bold to exclamation mark
);
// Editor should now be [
//  { insert: 'Hello Quill' },
//  { insert: '!', attributes: { bold: true} }
// ]
```

--------------------------------

### insertEmbed example

Source: https://quilljs.com/docs/api

Inserts an image embed at index 10.

```javascript
quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');
```

--------------------------------

### Quill.register multiple formats and modules

Source: https://quilljs.com/docs/api

Example of registering multiple formats and modules using an object, and the shorthand for registering a format directly. Note that you cannot use the shorthand for a module.

```javascript
Quill.register({
  'formats/custom-format': CustomFormat,
  'modules/custom-module-a': CustomModuleA,
  'modules/custom-module-b': CustomModuleB,
});


Quill.register(CustomFormat);
// You cannot do Quill.register(CustomModuleA); as CustomModuleA is not a format
```

--------------------------------

### setText example

Source: https://quilljs.com/docs/api

Sets the editor text to 'Hello\n'.

```javascript
quill.setText('Hello\n');
```

--------------------------------

### getText example

Source: https://quilljs.com/docs/api

Retrieves the text from index 0 to 10.

```javascript
const text = quill.getText(0, 10);
```

--------------------------------

### setContents example

Source: https://quilljs.com/docs/api

Sets the editor contents using an array of Delta operations.

```javascript
quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '\n' },
]);
```

--------------------------------

### npm: Import core stylesheet

Source: https://quilljs.com/docs/installation

Import the core stylesheet from the npm package. Requires a bundler setup that can handle CSS imports.

```javascript
import "quill/dist/quill.core.css";
```

--------------------------------

### deleteText example 1

Source: https://quilljs.com/docs/api

Deletes 4 characters starting at index 6.

```javascript
quill.deleteText(6, 4);
```

--------------------------------

### Word counter module example (index.js)

Source: https://quilljs.com/docs/guides/building-a-custom-module

JavaScript implementation of the word counter module. Registers a function as a Quill module that counts words and updates the counter element.

```javascript
Quill.register('modules/counter', function(quill, options) {
  const container = document.querySelector('#counter');
  quill.on('text-change', function() {
    const text = quill.getText();
    const words = text.trim().split(/\s+/).filter(function(word) {
      return word.length > 0;
    });
    container.textContent = words.length;
  });
});

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    counter: true
  }
});
```

--------------------------------

### CDN Full Build: HTML container and initialization

Source: https://quilljs.com/docs/installation

Create an editor container with an id and initialize Quill with the Snow theme. The preset build includes common formats.

```html
<div id="editor">
<h2>Demo Content</h2>
<p>Preset build with <code>snow</code> theme, and some common formats.</p>
</div>
```

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

--------------------------------

### npm: Import Quill and initialize editor

Source: https://quilljs.com/docs/installation

Import the full build from 'quill' or the core build from 'quill/core'. Then create a Quill instance on an element. Avoid importing 'quill' directly when using the core build to prevent loading the full build.

```javascript
import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';


const quill = new Quill('#editor');
```

--------------------------------

### Configure History Module with delay, maxStack, and userOnly

Source: https://quilljs.com/docs/modules/history

Example configuration for the History module. delay merges changes within the specified milliseconds, maxStack sets the maximum undo/redo stack size, and userOnly restricts undo/redo to user changes when true.

```javascript
const quill = new Quill('#editor', {
  modules: {
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    },
  },
  theme: 'snow'
});
```

--------------------------------

### hasFocus usage example

Source: https://quilljs.com/docs/api

Example of checking if the editor has focus with quill.hasFocus().

```javascript
quill.hasFocus();
```

--------------------------------

### Initialize Quill with Snow Theme

Source: https://quilljs.com/docs/quickstart

Complete HTML setup for initializing Quill 2.0.3 with the Snow theme. Includes the stylesheet link, editor container with initial content, library script, and initialization script. The editor is created on the #editor element with the snow theme.

```html
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
```

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

```html
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
```

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

--------------------------------

### Using a Quill theme (Bubble) with HTML and JavaScript

Source: https://quilljs.com/docs/customization/themes

Add the theme's stylesheet and the Quill script, then create a Quill instance with the theme specified in the configuration. This example uses the 'bubble' theme.

```html
<!-- Add the theme's stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css" />


<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    theme: 'bubble', // Specify theme in configuration
  });
</script>
```

--------------------------------

### blur usage example

Source: https://quilljs.com/docs/api

Example of calling quill.blur() to remove focus from the editor.

```javascript
quill.blur();
```

--------------------------------

### Example of retain operations for formatting and inserting

Source: https://quilljs.com/docs/guides/designing-the-delta-format

Shows a change array using format and retain operations to bold 'Hello' and insert a space, with comments indicating each character. This illustrates the concept of describing every character without explicit indexes.

```javascript
// Starting with "HelloWorld",
// bold "Hello", and insert a space right after it
const change = [
  { format: true, attributes: { bold: true } },  // H
  { format: true, attributes: { bold: true } },  // e
  { format: true, attributes: { bold: true } },  // l
  { format: true, attributes: { bold: true } },  // l
  { format: true, attributes: { bold: true } },  // o
  { insert: ' ' },
  { retain: true },  // W
  { retain: true },  // o
  { retain: true },  // r
  { retain: true },  // l
  { retain: true }   // d
]
```

--------------------------------

### scrollSelectionIntoView usage example

Source: https://quilljs.com/docs/api

Example of using scrollSelectionIntoView to scroll the current selection into view.

```javascript
quill.scrollSelectionIntoView();
```

--------------------------------

### Quill.debug usage example

Source: https://quilljs.com/docs/api

Example call to Quill.debug with the 'info' level to enable logging messages.

```javascript
Quill.debug('info');
```

--------------------------------

### Clear History Stack Example

Source: https://quilljs.com/docs/modules/history

Example usage of the clear method to clear the history stack.

```javascript
quill.history.clear();
```

--------------------------------

### Register essential formats for a functional editor

Source: https://quilljs.com/docs/customization/registries

A custom registry has no formats by default. This example shows the HTML and JavaScript files needed to set up an editor with a custom registry, including the stylesheet and Quill library. The toolbar buttons won't work until the corresponding formats are registered.

```html
<!-- Include stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<div id="editor">
</div>
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script src="/index.js"></script>
```

--------------------------------

### CDN Core Build: Include core CSS and script

Source: https://quilljs.com/docs/installation

Include the core build stylesheet and script from CDN. This build has no theme, formatting, or non-essential modules, allowing full customization.

```html
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.core.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.core.js"></script>

<div id="editor">
  <p>Core build with no theme, formatting, non-essential modules</p>
</div>

<script>
  const quill = new Quill('#editor');
</script>
```

--------------------------------

### Cutoff History Merger Window Example

Source: https://quilljs.com/docs/modules/history

Example usage of the cutoff method to reset the merger window.

```javascript
quill.history.cutoff();
```

--------------------------------

### off method example

Source: https://quilljs.com/docs/api

Example of using the off method to remove an event handler. The handler is defined separately and then added and removed.

```javascript
function handler() {
  console.log('Hello!');
}


quill.on('text-change', handler);
quill.off('text-change', handler);
```

--------------------------------

### Configure custom keyboard bindings on initialization

Source: https://quilljs.com/docs/modules/keyboard

Shows how to define custom bindings in the keyboard module configuration, including overwriting the default 'tab' binding and adding a new 'custom' binding. Also includes a 'list' binding that handles backspace on a list and propagates to Quill's default otherwise.

```javascript
const bindings = {
  // This will overwrite the default binding also named 'tab'
  tab: {
    key: 9,
    handler: function() {
      // Handle tab
    }
  },


  // There is no default binding named 'custom'
  // so this will be added without overwriting anything
  custom: {
    key: ['b', 'B'],
    shiftKey: true,
    handler: function(range, context) {
      // Handle shift+b
    }
  },


  list: {
    key: 'Backspace',
    format: ['list'],
    handler: function(range, context) {
      if (context.offset === 0) {
        // When backspace on the first character of a list,
        // remove the list instead
        this.quill.format('list', false, Quill.sources.USER);
      } else {
        // Otherwise propogate to Quill's default
        return true;
      }
    }
  }
};


const quill = new Quill('#editor', {
  modules: {
    keyboard: {
      bindings: bindings
    }
  }
});
```

--------------------------------

### Custom toolbar handlers with link handler and post-init addHandler

Source: https://quilljs.com/docs/modules/toolbar

Defines a toolbar options object with a custom link handler that prompts for a URL and formats the link. The handler is bound to the toolbar, so 'this' refers to the toolbar instance. Also shows creating a Quill instance with these options and adding an image handler post-initialization via toolbar.addHandler.

```javascript
const toolbarOptions = {
  handlers: {
    // handlers object will be merged with default handlers object
    link: function (value) {
      if (value) {
        const href = prompt('Enter the URL');
        this.quill.format('link', href);
      } else {
        this.quill.format('link', false);
      }
    }
  }
};


const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});


// Handlers can also be added post initialization
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);
```

--------------------------------

### Full toolbar configuration with theme

Source: https://quilljs.com/docs/modules/toolbar

A comprehensive toolbar configuration using arrays, objects, and dropdowns. Includes comments for each group. The theme is set to 'snow'.

```javascript
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image', 'video', 'formula'],


  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction


  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],


  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],


  ['clean']                                         // remove formatting button
];


const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

```

--------------------------------

### npm: Import Delta and Link format

Source: https://quilljs.com/docs/installation

Import Delta and Link directly from 'quill' or 'quill/core', or use Quill.import(). This is the natural approach in an npm environment.

```javascript
import Quill from 'quill';
// Or if you only need the core build
// import Quill from 'quill/core';


import { Delta } from 'quill';
// Or if you only need the core build
// import { Delta } from 'quill/core';
// Or const Delta = Quill.import('delta');


import Link from 'quill/formats/link';
// Or const Link = Quill.import('formats/link');
```

--------------------------------

### removeFormat method example

Source: https://quilljs.com/docs/api

Example of using removeFormat to strip formatting and embeds from a range. The comment shows the resulting editor contents after the call.

```javascript
quill.setContents([
  { insert: 'Hello', { bold: true } },
  { insert: '\n', { align: 'center' } },
  { insert: { formula: 'x^2' } },
  { insert: '\n', { align: 'center' } },
  { insert: 'World', { italic: true }},
  { insert: '\n', { align: 'center' } }
]);


quill.removeFormat(3, 7);
// Editor contents are now
// [
//   { insert: 'Hel', { bold: true } },
//   { insert: 'lo\n\nWo' },
//   { insert: 'rld', { italic: true }},
//   { insert: '\n', { align: 'center' } }
// ]
```

--------------------------------

### Register class color and style size attributors

Source: https://quilljs.com/docs/customization

Shows how to import and register the class-based color attributor and the style-based size attributor, then initialize Quill with a toolbar and snow theme. Use this to enable class-based color and style-based size formatting.

```javascript
const ColorClass = Quill.import('attributors/class/color');
const SizeStyle = Quill.import('attributors/style/size');
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);


// Initialize as you would normally
const quill = new Quill('#editor', {
  modules: {
    toolbar: true,
  },
  theme: 'snow',
});
```

--------------------------------

### Quill core HTML setup with toolbar and editor

Source: https://quilljs.com/docs/guides/cloning-medium-with-parchment

HTML page that loads Quill core CSS and JS from CDN, defines toolbar buttons, and includes an editor div. The script tag points to an external module (index.js) which is not shown.

```html
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.core.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.core.js"></script>

<link href="/styles.css" rel="stylesheet">

<div id="tooltip-controls">
  <button id="bold-button"><i class="fa fa-bold"></i></button>
  <button id="italic-button"><i class="fa fa-italic"></i></button>
  <button id="link-button"><i class="fa fa-link"></i></button>
  <button id="blockquote-button"><i class="fa fa-quote-right"></i></button>
  <button id="header-1-button"><i class="fa fa-header"><sub>1</sub></i></button>
  <button id="header-2-button"><i class="fa fa-header"><sub>2</sub></i></button>
</div>
<div id="sidebar-controls">
  <button id="image-button"><i class="fa fa-camera"></i></button>
  <button id="video-button"><i class="fa fa-play"></i></button>
  <button id="tweet-button"><i class="fa fa-twitter"></i></button>
  <button id="divider-button"><i class="fa fa-minus"></i></button>
</div>

<div id="editor">Tell your story...</div>

<script type="module" src="/index.js"></script>
```

--------------------------------

### getSelection usage example

Source: https://quilljs.com/docs/api

Example of using getSelection to retrieve the user's selection range. It checks if the range exists and logs whether the cursor is at an index or highlighted text.

```javascript
const range = quill.getSelection();
if (range) {
  if (range.length == 0) {
    console.log('User cursor is at index', range.index);
  } else {
    const text = quill.getText(range.index, range.length);
    console.log('User has highlighted: ', text);
  }
} else {
  console.log('User cursor is not in editor');
}
```

--------------------------------

### Define LinkBlot with constructor

Source: https://quilljs.com/docs/guides/cloning-medium-with-parchment

Alternative implementation of LinkBlot using a constructor to set static properties. The create method takes a url parameter, sets href and target attributes, and formats returns the href. Register with Quill.register.

```javascript
const Inline = Quill.import('blots/inline');

class LinkBlot extends Inline {
  static blotName = 'link';
  static tagName = 'a';

  static create(url) {
    let node = super.create();
    // Sanitize url if desired
    node.setAttribute('href', url);
    // Okay to set other non-format related attributes
    node.setAttribute('target', '_blank');
    return node;
  }
  
  static formats(node) {
    // We will only be called with a node already
    // determined to be a Link blot, so we do
    // not need to check ourselves
    return node.getAttribute('href');
  }
}

Quill.register(LinkBlot);
```
Tokens:
Raw