quill

  • Version 2.0.2
  • Published
  • 3.04 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 Module

abstract class Module<T extends {} = {}> {}

    constructor

    constructor(quill: Quill, options?: Partial<T>);

      property DEFAULTS

      static DEFAULTS: {};

        property options

        protected options: Partial<T>;

          property quill

          quill: Quill;

            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) => Delta;

                                                                          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
                                                                                                          ) => Delta;

                                                                                                            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: {
                                                                                                                      (
                                                                                                                      targets: Record<
                                                                                                                      string,
                                                                                                                      | Parchment.RegistryDefinition
                                                                                                                      | Record<string, unknown>
                                                                                                                      | Theme
                                                                                                                      | Module
                                                                                                                      | Function
                                                                                                                      >,
                                                                                                                      overwrite?: boolean
                                                                                                                      ): void;
                                                                                                                      (target: Parchment.RegistryDefinition, overwrite?: boolean): void;
                                                                                                                      (path: string, target: any, overwrite?: boolean): void;
                                                                                                                      };

                                                                                                                        method removeFormat

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

                                                                                                                          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) => Delta;

                                                                                                                              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) => Delta;

                                                                                                                                  method update

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

                                                                                                                                    method updateContents

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

                                                                                                                                      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 (6)

                                                                                                                                                                                      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>