quill

  • Version 2.0.0
  • Published
  • 3.02 MB
  • 4 dependencies
  • BSD-3-Clause license

Install

npm i quill
yarn add quill
pnpm add quill

Overview

Your powerful, rich text editor

Index

Classes

class Quill

class Quill {}

    constructor

    constructor(container: string | HTMLElement, options?: QuillOptions);

      property allowReadOnlyEdits

      protected allowReadOnlyEdits: boolean;

        property clipboard

        clipboard: Clipboard;

          property composition

          composition: Composition;

            property container

            container: HTMLElement;

              property DEFAULTS

              static DEFAULTS: {
              bounds: null;
              modules: {
              clipboard: boolean;
              keyboard: boolean;
              history: boolean;
              uploader: boolean;
              };
              placeholder: string;
              readOnly: false;
              registry: Parchment.Registry;
              theme: string;
              };

                property editor

                editor: Editor;

                  property emitter

                  emitter: Emitter;

                    property events

                    static events: {
                    readonly EDITOR_CHANGE: 'editor-change';
                    readonly SCROLL_BEFORE_UPDATE: 'scroll-before-update';
                    readonly SCROLL_BLOT_MOUNT: 'scroll-blot-mount';
                    readonly SCROLL_BLOT_UNMOUNT: 'scroll-blot-unmount';
                    readonly SCROLL_OPTIMIZE: 'scroll-optimize';
                    readonly SCROLL_UPDATE: 'scroll-update';
                    readonly SCROLL_EMBED_UPDATE: 'scroll-embed-update';
                    readonly SELECTION_CHANGE: 'selection-change';
                    readonly TEXT_CHANGE: 'text-change';
                    readonly COMPOSITION_BEFORE_START: 'composition-before-start';
                    readonly COMPOSITION_START: 'composition-start';
                    readonly COMPOSITION_BEFORE_END: 'composition-before-end';
                    readonly COMPOSITION_END: 'composition-end';
                    };

                      property history

                      history: History;

                        property imports

                        static imports: Record<string, unknown>;

                          property keyboard

                          keyboard: Keyboard;

                            property options

                            options: ExpandedQuillOptions;

                              property root

                              root: HTMLDivElement;

                                property scroll

                                scroll: Scroll;

                                  property selection

                                  selection: Selection;

                                    property sources

                                    static sources: {
                                    readonly API: 'api';
                                    readonly SILENT: 'silent';
                                    readonly USER: 'user';
                                    };

                                      property theme

                                      theme: Theme;

                                        property uploader

                                        uploader: Uploader;

                                          property version

                                          static version: string;

                                            method addContainer

                                            addContainer: {
                                            (container: string, refNode?: Node | null): HTMLDivElement;
                                            (container: HTMLElement, refNode?: Node): HTMLElement;
                                            };

                                              method blur

                                              blur: () => void;

                                                method debug

                                                static debug: (limit: DebugLevel | boolean) => void;

                                                  method deleteText

                                                  deleteText: {
                                                  (range: Range, source?: EmitterSource): Delta;
                                                  (index: number, length: number, source?: EmitterSource): Delta;
                                                  };

                                                    method disable

                                                    disable: () => void;

                                                      method editReadOnly

                                                      editReadOnly: <T>(modifier: () => T) => T;

                                                        method enable

                                                        enable: (enabled?: boolean) => void;

                                                          method find

                                                          static find: (node: Node, bubble?: boolean) => Parchment.Blot | Quill | null;

                                                            method focus

                                                            focus: (options?: { preventScroll?: boolean }) => void;

                                                              method format

                                                              format: (name: string, value: unknown, source?: EmitterSource) => any;

                                                                method formatLine

                                                                formatLine: {
                                                                (
                                                                index: number,
                                                                length: number,
                                                                formats: Record<string, unknown>,
                                                                source?: EmitterSource
                                                                ): Delta;
                                                                (
                                                                index: number,
                                                                length: number,
                                                                name: string,
                                                                value?: unknown,
                                                                source?: EmitterSource
                                                                ): Delta;
                                                                };

                                                                  method formatText

                                                                  formatText: {
                                                                  (range: Range, name: string, value: unknown, source?: EmitterSource): Delta;
                                                                  (
                                                                  index: number,
                                                                  length: number,
                                                                  name: string,
                                                                  value: unknown,
                                                                  source?: EmitterSource
                                                                  ): Delta;
                                                                  (
                                                                  index: number,
                                                                  length: number,
                                                                  formats: Record<string, unknown>,
                                                                  source?: EmitterSource
                                                                  ): Delta;
                                                                  };

                                                                    method getBounds

                                                                    getBounds: (index: number | Range, length?: number) => Bounds | null;

                                                                      method getContents

                                                                      getContents: (index?: number, length?: number) => Delta;

                                                                        method getFormat

                                                                        getFormat: {
                                                                        (index?: number, length?: number): { [format: string]: unknown };
                                                                        (range?: Range): { [format: string]: unknown };
                                                                        };

                                                                          method getIndex

                                                                          getIndex: (blot: Parchment.Blot) => number;

                                                                            method getLeaf

                                                                            getLeaf: (index: number) => [Parchment.LeafBlot | null, number];

                                                                              method getLength

                                                                              getLength: () => number;

                                                                                method getLine

                                                                                getLine: (index: number) => [Block | BlockEmbed | null, number];

                                                                                  method getLines

                                                                                  getLines: {
                                                                                  (range: Range): (Block | BlockEmbed)[];
                                                                                  (index?: number, length?: number): (Block | BlockEmbed)[];
                                                                                  };

                                                                                    method getModule

                                                                                    getModule: (name: string) => unknown;

                                                                                      method getSelection

                                                                                      getSelection: { (focus: true): Range; (focus?: boolean): Range };

                                                                                        method getSemanticHTML

                                                                                        getSemanticHTML: {
                                                                                        (range: Range): string;
                                                                                        (index?: number, length?: number): string;
                                                                                        };

                                                                                          method getText

                                                                                          getText: { (range?: Range): string; (index?: number, length?: number): string };

                                                                                            method hasFocus

                                                                                            hasFocus: () => boolean;

                                                                                              method import

                                                                                              static import: {
                                                                                              (name: 'core/module'): typeof Module;
                                                                                              (name: `themes/${string}`): typeof Theme;
                                                                                              (name: 'parchment'): any;
                                                                                              (name: 'delta'): any;
                                                                                              (name: string): unknown;
                                                                                              };

                                                                                                method insertEmbed

                                                                                                insertEmbed: (
                                                                                                index: number,
                                                                                                embed: string,
                                                                                                value: unknown,
                                                                                                source?: EmitterSource
                                                                                                ) => any;

                                                                                                  method insertText

                                                                                                  insertText: {
                                                                                                  (index: number, text: string, source?: EmitterSource): Delta;
                                                                                                  (
                                                                                                  index: number,
                                                                                                  text: string,
                                                                                                  formats: Record<string, unknown>,
                                                                                                  source?: EmitterSource
                                                                                                  ): Delta;
                                                                                                  (
                                                                                                  index: number,
                                                                                                  text: string,
                                                                                                  name: string,
                                                                                                  value: unknown,
                                                                                                  source?: EmitterSource
                                                                                                  ): Delta;
                                                                                                  };

                                                                                                    method isEnabled

                                                                                                    isEnabled: () => boolean;

                                                                                                      method off

                                                                                                      off: (...args: Parameters<(typeof Emitter)['prototype']['off']>) => Emitter;

                                                                                                        method on

                                                                                                        on: {
                                                                                                        (
                                                                                                        event: (typeof Emitter)['events']['TEXT_CHANGE'],
                                                                                                        handler: (delta: Delta, oldContent: Delta, source: EmitterSource) => void
                                                                                                        ): Emitter;
                                                                                                        (
                                                                                                        event: 'selection-change',
                                                                                                        handler: (range: Range, oldRange: Range, source: EmitterSource) => void
                                                                                                        ): Emitter;
                                                                                                        (
                                                                                                        event: 'editor-change',
                                                                                                        handler: (
                                                                                                        ...args:
                                                                                                        | ['text-change', Delta, Delta, EmitterSource]
                                                                                                        | ['selection-change', Range, Range, EmitterSource]
                                                                                                        ) => void
                                                                                                        ): Emitter;
                                                                                                        (event: string, ...args: unknown[]): Emitter;
                                                                                                        };

                                                                                                          method once

                                                                                                          once: (...args: Parameters<(typeof Emitter)['prototype']['once']>) => Emitter;

                                                                                                            method register

                                                                                                            static register: (
                                                                                                            path:
                                                                                                            | string
                                                                                                            | Parchment.BlotConstructor
                                                                                                            | Parchment.Attributor
                                                                                                            | Record<string, unknown>,
                                                                                                            target?: Parchment.BlotConstructor | Parchment.Attributor | boolean,
                                                                                                            overwrite?: boolean
                                                                                                            ) => void;

                                                                                                              method removeFormat

                                                                                                              removeFormat: (index: number, length: number, source?: EmitterSource) => any;

                                                                                                                method scrollIntoView

                                                                                                                scrollIntoView: () => void;
                                                                                                                • Deprecated

                                                                                                                  Use Quill#scrollSelectionIntoView() instead.

                                                                                                                method scrollRectIntoView

                                                                                                                scrollRectIntoView: (rect: Rect) => void;

                                                                                                                  method scrollSelectionIntoView

                                                                                                                  scrollSelectionIntoView: () => void;
                                                                                                                  • Scroll the current selection into the visible area. If the selection is already visible, no scrolling will occur.

                                                                                                                  method setContents

                                                                                                                  setContents: (delta: Delta | Op[], source?: EmitterSource) => any;

                                                                                                                    method setSelection

                                                                                                                    setSelection: {
                                                                                                                    (range: Range | null, source?: EmitterSource): void;
                                                                                                                    (index: number, source?: EmitterSource): void;
                                                                                                                    (index: number, length?: number, source?: EmitterSource): void;
                                                                                                                    (index: number, source?: EmitterSource): void;
                                                                                                                    };

                                                                                                                      method setText

                                                                                                                      setText: (text: string, source?: EmitterSource) => any;

                                                                                                                        method update

                                                                                                                        update: (source?: EmitterSource) => void;

                                                                                                                          method updateContents

                                                                                                                          updateContents: (delta: Delta | Op[], source?: EmitterSource) => any;

                                                                                                                            class Range

                                                                                                                            class Range {}

                                                                                                                              constructor

                                                                                                                              constructor(index: number, length?: number);

                                                                                                                                property index

                                                                                                                                index: number;

                                                                                                                                  property length

                                                                                                                                  length: number;

                                                                                                                                    Interfaces

                                                                                                                                    interface Bounds

                                                                                                                                    interface Bounds {}

                                                                                                                                      property bottom

                                                                                                                                      bottom: number;

                                                                                                                                        property height

                                                                                                                                        height: number;

                                                                                                                                          property left

                                                                                                                                          left: number;

                                                                                                                                            property right

                                                                                                                                            right: number;

                                                                                                                                              property top

                                                                                                                                              top: number;

                                                                                                                                                property width

                                                                                                                                                width: number;

                                                                                                                                                  interface ExpandedQuillOptions

                                                                                                                                                  interface ExpandedQuillOptions extends Omit<QuillOptions, 'theme' | 'formats'> {}
                                                                                                                                                  • Similar to QuillOptions, but with all properties expanded to their default values, and all selectors resolved to HTMLElements.

                                                                                                                                                  property bounds

                                                                                                                                                  bounds?: HTMLElement | null;

                                                                                                                                                    property container

                                                                                                                                                    container: HTMLElement;

                                                                                                                                                      property modules

                                                                                                                                                      modules: Record<string, unknown>;

                                                                                                                                                        property readOnly

                                                                                                                                                        readOnly: boolean;

                                                                                                                                                          property registry

                                                                                                                                                          registry: Parchment.Registry;

                                                                                                                                                            property theme

                                                                                                                                                            theme: ThemeConstructor;

                                                                                                                                                              interface QuillOptions

                                                                                                                                                              interface QuillOptions {}
                                                                                                                                                              • Options for initializing a Quill instance

                                                                                                                                                              property bounds

                                                                                                                                                              bounds?: HTMLElement | string | null;

                                                                                                                                                                property debug

                                                                                                                                                                debug?: DebugLevel | boolean;

                                                                                                                                                                  property formats

                                                                                                                                                                  formats?: string[] | null;
                                                                                                                                                                  • A list of formats that are recognized and can exist within the editor contents. null means all formats are allowed. null

                                                                                                                                                                  property modules

                                                                                                                                                                  modules?: Record<string, unknown>;

                                                                                                                                                                    property placeholder

                                                                                                                                                                    placeholder?: string;
                                                                                                                                                                    • Placeholder text to display when the editor is empty ""

                                                                                                                                                                    property readOnly

                                                                                                                                                                    readOnly?: boolean;
                                                                                                                                                                    • Whether to disable the editing false

                                                                                                                                                                    property registry

                                                                                                                                                                    registry?: Parchment.Registry;

                                                                                                                                                                      property theme

                                                                                                                                                                      theme?: string;

                                                                                                                                                                        Type Aliases

                                                                                                                                                                        type DebugLevel

                                                                                                                                                                        type DebugLevel = (typeof levels)[number];

                                                                                                                                                                          type EmitterSource

                                                                                                                                                                          type EmitterSource = (typeof Emitter.sources)[keyof typeof Emitter.sources];

                                                                                                                                                                            Package Files (5)

                                                                                                                                                                            Dependencies (4)

                                                                                                                                                                            Dev Dependencies (44)

                                                                                                                                                                            Peer Dependencies (0)

                                                                                                                                                                            No peer dependencies.

                                                                                                                                                                            Badge

                                                                                                                                                                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/quill.

                                                                                                                                                                            • Markdown
                                                                                                                                                                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/quill)
                                                                                                                                                                            • HTML
                                                                                                                                                                              <a href="https://www.jsdocs.io/package/quill"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>