Nihilistic Party Mantra

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    Quill Blot Formatter

    A quill module to format document blots. Heavily inspired by quill-image-resize-module. Out of the box supports resizing and realigning images and iframe videos, but can be easily extended using BlotSpec and Action.




    Using yarn:

    yarn add quill-blot-formatter

    Using npm:

    npm install --save quill-blot-formatter


    As Module

    import Quill from 'quill';
    // from the index, which exports a lot of useful modules
    import BlotFormatter from 'quill-blot-formatter';
    // or, from each individual module
    import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
    Quill.register('modules/blotFormatter', BlotFormatter);
    const quill = new Quill(..., {
      modules: {
        blotFormatter: {
          // see config options below

    Script Tag

    quill-blot-formatter.min.js is provided which exports the same modules as index.js under the global QuillBlotFormatter.

    <script src="<quill>"></script> 
    <script src="node_modules/quill-blot-formatter/dist/quill-blot-formatter.min.js"></script>
      Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
      const quill = new Quill(..., {
          modules: {
              blotFormatter: {
                // see config options below


    The BlotSpec classes define how BlotFormatter interacts with blots. They take the BlotFormatter as a constructor arg and have the following functions:

    init(): void

    Called after all specs have been constructed. Use this to bind to quill events to determine when to activate a specific spec.

    getActions(): Class<Action>[]

    The actions that are allowed on this blot. The default is [AlignAction, ResizeAction, DeleteAction].

    getTargetElement(): ?HTMLElement

    When the spec is active this should return the element that is to be formatter

    getOverlayElement(): ?HTMLElement

    When the spec is active this should return the element to display the formatting overlay. This defaults to return getTargetElement() since they will typically be the same element.

    setSelection(): void

    After the spec is activated this should set the quill selection using setSelection. Defaults to quill.setSelection(null).

    onHide(): void

    Called when the spec is deactivated by the user clicking away from the blot. Use this to clean up any state in the spec during activation.


    Each spec should call; to request activation. See specs/ for the built-in specs.


    The Action classes define the actions available to a blot once its spec is activated. They take the BlotFormatter as a constructor arg and have the following functions:

    onCreate(): void

    Called immediately after the action is created. Use this to bind quill events and create elements to attach to the overlay.

    onUpdate(): void

    Called when the formatter has changed something on the blot. Use this to update any internal state.

    onDestroy(): void

    Called when the formatter is hidden by the user.

    See actions/ for the existing actions.


    Using quill module options it's easy to disable existing specs, actions, or to override any of the styles provided by this module. For example: if you wanted to remove resizing, support only images, and change the overlay border the following config would work:

    import Quill from 'quill';
    // from main module
    import BlotFormatter, { AlignAction, DeleteAction, ImageSpec } from 'quill-blot-formatter'
    // or, from individual modules
    import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
    import AlignAction from 'quill-blot-formatter/dist/actions/align/AlignAction';
    import DeleteAction from 'quill-blot-formatter/dist/actions/DeleteAction';
    import ImageSpec from 'quill-blot-formatter/dist/specs/ImageSpec';
    Quill.register('modules/blotFormatter', BlotFormatter);
    class CustomImageSpec extends ImageSpec {
        getActions() {
            return [AlignAction, DeleteAction];
    const quill = new Quill(..., {
      modules: {
        blotFormatter: {
          specs: [
          overlay: {
            style: {
              border: '2px solid red',


    • For all supported options as well as the default see Options.
    • object properties are merged, but array properties override the defaults.
    • To completely disable styles (, resize.handleStyle, etc) set those to null


    npm i quill-blot-formatter

    DownloadsWeekly Downloads






    Unpacked Size

    125 kB

    Total Files


    Last publish


    • nmonterroso