ngx-quill

ngx-quill

Version 30.1.3
Published 22 days ago
283 kB
1 dependency
MIT license

Install

npm i ngx-quill

yarn add ngx-quill

pnpm add ngx-quill

Overview

Angular components for the easy use of the QuillJS richt text editor.

Index

Functions

function getFormat

getFormat: (format?: QuillFormat, configFormat?: QuillFormat) => QuillFormat;

Classes

class QuillEditorBase

abstract class QuillEditorBase implements ControlValueAccessor, Validator {}

constructor

constructor();

property beforeRender

readonly beforeRender: _angular_core.InputSignal<any>;

property bounds

readonly bounds: _angular_core.InputSignal<string | HTMLElement>;

property classes

readonly classes: _angular_core.InputSignal<string>;

property compareValues

readonly compareValues: _angular_core.InputSignalWithTransform<boolean, unknown>;

property content

content: any;

property customModules

readonly customModules: _angular_core.InputSignal<CustomModule[]>;

property customOptions

readonly customOptions: _angular_core.InputSignal<CustomOption[]>;

property customToolbarPosition

readonly customToolbarPosition: _angular_core.InputSignal<'top' | 'bottom'>;

property debounceTime

readonly debounceTime: _angular_core.InputSignal<number>;

property debug

readonly debug: _angular_core.InputSignal<false | 'error' | 'warn' | 'log'>;

property defaultEmptyValue

readonly defaultEmptyValue: _angular_core.InputSignal<any>;

property disabled

disabled: boolean;

property editorChangeHandler

editorChangeHandler: (
    event: 'text-change' | 'selection-change',
    current: any | Range | null,
    old: any | Range | null,
    source: string
) => void;

property editorElem

editorElem: HTMLElement;

property filterNull

readonly filterNull: _angular_core.InputSignalWithTransform<boolean, unknown>;

property format

readonly format: _angular_core.InputSignal<any>;

property formats

readonly formats: _angular_core.InputSignal<string[]>;

property init

init: boolean;

property linkPlaceholder

readonly linkPlaceholder: _angular_core.InputSignal<string>;

property maxLength

readonly maxLength: _angular_core.InputSignal<number>;

property minLength

readonly minLength: _angular_core.InputSignal<number>;

property modules

readonly modules: _angular_core.InputSignal<any>;

property onBlur

onBlur: EventEmitter<Blur>;

property onContentChanged

onContentChanged: EventEmitter<ContentChange>;

property onEditorChanged

onEditorChanged: EventEmitter<EditorChangeContent | EditorChangeSelection>;

property onEditorCreated

onEditorCreated: EventEmitter<QuillType>;

property onFocus

onFocus: EventEmitter<Focus>;

property onlyFormatEventData

readonly onlyFormatEventData: _angular_core.InputSignal<boolean | 'none'>;

property onModelChange

onModelChange: (modelValue?: any) => void;

property onModelTouched

onModelTouched: () => void;

property onNativeBlur

onNativeBlur: EventEmitter<Blur>;

property onNativeFocus

onNativeFocus: EventEmitter<Focus>;

property onSelectionChanged

onSelectionChanged: EventEmitter<SelectionChange>;

property onValidatorChanged

onValidatorChanged: () => void;

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    QuillEditorBase,
    never,
    never,
    {
        format: { alias: 'format'; required: false; isSignal: true };
        theme: { alias: 'theme'; required: false; isSignal: true };
        modules: { alias: 'modules'; required: false; isSignal: true };
        debug: { alias: 'debug'; required: false; isSignal: true };
        readOnly: { alias: 'readOnly'; required: false; isSignal: true };
        placeholder: { alias: 'placeholder'; required: false; isSignal: true };
        maxLength: { alias: 'maxLength'; required: false; isSignal: true };
        minLength: { alias: 'minLength'; required: false; isSignal: true };
        required: { alias: 'required'; required: false; isSignal: true };
        formats: { alias: 'formats'; required: false; isSignal: true };
        customToolbarPosition: {
            alias: 'customToolbarPosition';
            required: false;
            isSignal: true;
        };
        sanitize: { alias: 'sanitize'; required: false; isSignal: true };
        beforeRender: { alias: 'beforeRender'; required: false; isSignal: true };
        styles: { alias: 'styles'; required: false; isSignal: true };
        registry: { alias: 'registry'; required: false; isSignal: true };
        bounds: { alias: 'bounds'; required: false; isSignal: true };
        customOptions: {
            alias: 'customOptions';
            required: false;
            isSignal: true;
        };
        customModules: {
            alias: 'customModules';
            required: false;
            isSignal: true;
        };
        trackChanges: { alias: 'trackChanges'; required: false; isSignal: true };
        classes: { alias: 'classes'; required: false; isSignal: true };
        trimOnValidation: {
            alias: 'trimOnValidation';
            required: false;
            isSignal: true;
        };
        linkPlaceholder: {
            alias: 'linkPlaceholder';
            required: false;
            isSignal: true;
        };
        compareValues: {
            alias: 'compareValues';
            required: false;
            isSignal: true;
        };
        filterNull: { alias: 'filterNull'; required: false; isSignal: true };
        debounceTime: { alias: 'debounceTime'; required: false; isSignal: true };
        onlyFormatEventData: {
            alias: 'onlyFormatEventData';
            required: false;
            isSignal: true;
        };
        defaultEmptyValue: {
            alias: 'defaultEmptyValue';
            required: false;
            isSignal: true;
        };
        valueGetter: { alias: 'valueGetter'; required: false; isSignal: true };
        valueSetter: { alias: 'valueSetter'; required: false; isSignal: true };
    },
    {
        onEditorCreated: 'onEditorCreated';
        onEditorChanged: 'onEditorChanged';
        onContentChanged: 'onContentChanged';
        onSelectionChanged: 'onSelectionChanged';
        onFocus: 'onFocus';
        onBlur: 'onBlur';
        onNativeFocus: 'onNativeFocus';
        onNativeBlur: 'onNativeBlur';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillEditorBase, never>;

property placeholder

readonly placeholder: _angular_core.InputSignal<string>;

property quillEditor

quillEditor: QuillType;

property readOnly

readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;

property registry

readonly registry: _angular_core.InputSignal<any>;

property required

readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;

property sanitize

readonly sanitize: _angular_core.InputSignal<boolean>;

property selectionChangeHandler

selectionChangeHandler: (
    range: Range | null,
    oldRange: Range | null,
    source: string
) => void;

property styles

readonly styles: _angular_core.InputSignal<any>;

property textChangeHandler

textChangeHandler: (
    delta: DeltaType,
    oldDelta: DeltaType,
    source: string
) => void;

property theme

readonly theme: _angular_core.InputSignal<string>;

property toolbarPosition

readonly toolbarPosition: _angular_core.WritableSignal<string>;

property trackChanges

readonly trackChanges: _angular_core.InputSignal<'user' | 'all'>;

property trimOnValidation

readonly trimOnValidation: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

property valueGetter

valueGetter: _angular_core.InputSignal<
    (quillEditor: QuillType, forceFormat?: QuillFormat) => string | any
>;

property valueSetter

valueSetter: _angular_core.InputSignal<
    (quillEditor: QuillType, value: any) => any
>;

method addClasses

addClasses: (classList: string) => void;

method normalizeClassNames

static normalizeClassNames: (classes: string) => string[];

method registerOnChange

registerOnChange: (fn: (modelValue: any) => void) => void;

method registerOnTouched

registerOnTouched: (fn: () => void) => void;

method registerOnValidatorChange

registerOnValidatorChange: (fn: () => void) => void;

method removeClasses

removeClasses: (classList: string) => void;

method setDisabledState

setDisabledState: (isDisabled?: boolean) => void;

method validate

validate: () => {
    minLengthError?: { given: number; minLength: number };
    maxLengthError?: { given: number; maxLength: number };
    requiredError?: { empty: boolean };
} | null;

method writeValue

writeValue: (currentValue: any) => void;

class QuillEditorComponent

class QuillEditorComponent extends QuillEditorBase {}

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    QuillEditorComponent,
    'quill-editor',
    never,
    {},
    {},
    never,
    [
        '[above-quill-editor-toolbar]',
        '[quill-editor-toolbar]',
        '[below-quill-editor-toolbar]'
    ],
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillEditorComponent, never>;

class QuillEditorFieldBase

abstract class QuillEditorFieldBase
    implements FormValueControl<string | DeltaType | null> {}

constructor

constructor();

property beforeRender

readonly beforeRender: _angular_core.InputSignal<any>;

property bounds

readonly bounds: _angular_core.InputSignal<string | HTMLElement>;

property classes

readonly classes: _angular_core.InputSignal<string>;

property compareValues

readonly compareValues: _angular_core.InputSignalWithTransform<boolean, unknown>;

property customModules

readonly customModules: _angular_core.InputSignal<CustomModule[]>;

property customOptions

readonly customOptions: _angular_core.InputSignal<CustomOption[]>;

property customToolbarPosition

readonly customToolbarPosition: _angular_core.InputSignal<'top' | 'bottom'>;

property debounceTime

readonly debounceTime: _angular_core.InputSignal<number>;

property debug

readonly debug: _angular_core.InputSignal<false | 'error' | 'warn' | 'log'>;

property defaultEmptyValue

readonly defaultEmptyValue: _angular_core.InputSignal<any>;

property disabled

readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;

property editorChangeHandler

editorChangeHandler: (
    event: 'text-change' | 'selection-change',
    current: any | Range | null,
    old: any | Range | null,
    source: string
) => void;

property editorElem

editorElem: HTMLElement;

property filterNull

readonly filterNull: _angular_core.InputSignalWithTransform<boolean, unknown>;

property format

readonly format: _angular_core.InputSignal<any>;

property formats

readonly formats: _angular_core.InputSignal<string[]>;

property linkPlaceholder

readonly linkPlaceholder: _angular_core.InputSignal<string>;

property modules

readonly modules: _angular_core.InputSignal<any>;

property onBlur

onBlur: EventEmitter<Blur>;

property onContentChanged

onContentChanged: EventEmitter<ContentChange>;

property onEditorChanged

onEditorChanged: EventEmitter<EditorChangeContent | EditorChangeSelection>;

property onEditorCreated

onEditorCreated: EventEmitter<QuillType>;

property onFocus

onFocus: EventEmitter<Focus>;

property onlyFormatEventData

readonly onlyFormatEventData: _angular_core.InputSignal<boolean | 'none'>;

property onNativeBlur

onNativeBlur: EventEmitter<Blur>;

property onNativeFocus

onNativeFocus: EventEmitter<Focus>;

property onSelectionChanged

onSelectionChanged: EventEmitter<SelectionChange>;

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    QuillEditorFieldBase,
    never,
    never,
    {
        value: { alias: 'value'; required: false; isSignal: true };
        touched: { alias: 'touched'; required: false; isSignal: true };
        disabled: { alias: 'disabled'; required: false; isSignal: true };
        readonly: { alias: 'readonly'; required: false; isSignal: true };
        format: { alias: 'format'; required: false; isSignal: true };
        theme: { alias: 'theme'; required: false; isSignal: true };
        modules: { alias: 'modules'; required: false; isSignal: true };
        debug: { alias: 'debug'; required: false; isSignal: true };
        placeholder: { alias: 'placeholder'; required: false; isSignal: true };
        formats: { alias: 'formats'; required: false; isSignal: true };
        customToolbarPosition: {
            alias: 'customToolbarPosition';
            required: false;
            isSignal: true;
        };
        sanitize: { alias: 'sanitize'; required: false; isSignal: true };
        beforeRender: { alias: 'beforeRender'; required: false; isSignal: true };
        styles: { alias: 'styles'; required: false; isSignal: true };
        registry: { alias: 'registry'; required: false; isSignal: true };
        bounds: { alias: 'bounds'; required: false; isSignal: true };
        customOptions: {
            alias: 'customOptions';
            required: false;
            isSignal: true;
        };
        customModules: {
            alias: 'customModules';
            required: false;
            isSignal: true;
        };
        trackChanges: { alias: 'trackChanges'; required: false; isSignal: true };
        classes: { alias: 'classes'; required: false; isSignal: true };
        trimOnValidation: {
            alias: 'trimOnValidation';
            required: false;
            isSignal: true;
        };
        linkPlaceholder: {
            alias: 'linkPlaceholder';
            required: false;
            isSignal: true;
        };
        compareValues: {
            alias: 'compareValues';
            required: false;
            isSignal: true;
        };
        filterNull: { alias: 'filterNull'; required: false; isSignal: true };
        debounceTime: { alias: 'debounceTime'; required: false; isSignal: true };
        onlyFormatEventData: {
            alias: 'onlyFormatEventData';
            required: false;
            isSignal: true;
        };
        defaultEmptyValue: {
            alias: 'defaultEmptyValue';
            required: false;
            isSignal: true;
        };
        valueGetter: { alias: 'valueGetter'; required: false; isSignal: true };
        valueSetter: { alias: 'valueSetter'; required: false; isSignal: true };
    },
    {
        value: 'valueChange';
        touched: 'touchedChange';
        onEditorCreated: 'onEditorCreated';
        onEditorChanged: 'onEditorChanged';
        onContentChanged: 'onContentChanged';
        onSelectionChanged: 'onSelectionChanged';
        onFocus: 'onFocus';
        onBlur: 'onBlur';
        onNativeFocus: 'onNativeFocus';
        onNativeBlur: 'onNativeBlur';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillEditorFieldBase, never>;

property placeholder

readonly placeholder: _angular_core.InputSignal<string>;

property quill

protected quill: QuillType;

property quillEditor

readonly quillEditor: _angular_core.WritableSignal<any>;

property quillService

protected quillService: QuillService;

property readonly

readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;

property registry

readonly registry: _angular_core.InputSignal<any>;

property sanitize

readonly sanitize: _angular_core.InputSignal<boolean>;

property selectionChangeHandler

selectionChangeHandler: (
    range: Range | null,
    oldRange: Range | null,
    source: string
) => void;

property styles

readonly styles: _angular_core.InputSignal<any>;

property textChangeHandler

textChangeHandler: (
    delta: DeltaType,
    oldDelta: DeltaType,
    source: string
) => void;

property theme

readonly theme: _angular_core.InputSignal<string>;

property toolbarPosition

readonly toolbarPosition: _angular_core.WritableSignal<string>;

property touched

readonly touched: _angular_core.ModelSignal<boolean>;

property trackChanges

readonly trackChanges: _angular_core.InputSignal<'user' | 'all'>;

property trimOnValidation

readonly trimOnValidation: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

property value

readonly value: _angular_core.ModelSignal<any>;

property valueGetter

valueGetter: _angular_core.InputSignal<
    (quillEditor: QuillType, forceFormat?: QuillFormat) => string | any
>;

property valueSetter

valueSetter: _angular_core.InputSignal<
    (quillEditor: QuillType, value: string | DeltaType | null) => any
>;

method addClasses

addClasses: (classList: string) => void;

method focus

focus: () => void;

method normalizeClassNames

static normalizeClassNames: (classes: string) => string[];

method removeClasses

removeClasses: (classList: string) => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

method validate

validate: ({
    required,
    minLength,
    maxLength,
}: {
    required?: boolean;
    minLength?: number;
    maxLength?: number;
}) => ValidationResult<{ kind: ValidationKind; message?: string }> | null;

method writeValue

writeValue: (currentValue: string | DeltaType | null) => void;

class QuillEditorFieldComponent

class QuillEditorFieldComponent extends QuillEditorFieldBase {}

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    QuillEditorFieldComponent,
    'quill-editor-field',
    never,
    {},
    {},
    never,
    [
        '[above-quill-editor-toolbar]',
        '[quill-editor-toolbar]',
        '[below-quill-editor-toolbar]'
    ],
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<
    QuillEditorFieldComponent,
    never
>;

class QuillModule

class QuillModule {}

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillModule, never>;

property ɵinj

static ɵinj: _angular_core.ɵɵInjectorDeclaration<QuillModule>;

property ɵmod

static ɵmod: _angular_core.ɵɵNgModuleDeclaration<
    QuillModule,
    never,
    [
        typeof QuillEditorComponent,
        typeof QuillViewComponent,
        typeof QuillViewHTMLComponent
    ],
    [
        typeof QuillEditorComponent,
        typeof QuillViewComponent,
        typeof QuillViewHTMLComponent
    ]
>;

method forRoot

static forRoot: (config?: QuillConfig) => ModuleWithProviders<QuillModule>;

class QuillService

class QuillService {}

property config

readonly config: QuillConfig;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillService, never>;

property ɵprov

static ɵprov: _angular_core.ɵɵInjectableDeclaration<QuillService>;

method getQuill

getQuill: () => Observable<any>;

class QuillViewComponent

class QuillViewComponent {}

constructor

constructor();

property beforeRender

readonly beforeRender: _angular_core.InputSignal<any>;

property content

readonly content: _angular_core.InputSignal<any>;

property customModules

readonly customModules: _angular_core.InputSignal<CustomModule[]>;

property customOptions

readonly customOptions: _angular_core.InputSignal<CustomOption[]>;

property debug

readonly debug: _angular_core.InputSignal<false | 'error' | 'warn' | 'log'>;

property editorElem

editorElem: HTMLElement;

property format

readonly format: _angular_core.InputSignal<'object' | 'json' | 'html' | 'text'>;

property formats

readonly formats: _angular_core.InputSignal<string[]>;

property init

init: boolean;

property modules

readonly modules: _angular_core.InputSignal<any>;

property onEditorCreated

onEditorCreated: EventEmitter<any>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    QuillViewComponent,
    'quill-view',
    never,
    {
        format: { alias: 'format'; required: false; isSignal: true };
        theme: { alias: 'theme'; required: false; isSignal: true };
        modules: { alias: 'modules'; required: false; isSignal: true };
        debug: { alias: 'debug'; required: false; isSignal: true };
        formats: { alias: 'formats'; required: false; isSignal: true };
        sanitize: { alias: 'sanitize'; required: false; isSignal: true };
        beforeRender: { alias: 'beforeRender'; required: false; isSignal: true };
        strict: { alias: 'strict'; required: false; isSignal: true };
        content: { alias: 'content'; required: false; isSignal: true };
        customModules: {
            alias: 'customModules';
            required: false;
            isSignal: true;
        };
        customOptions: {
            alias: 'customOptions';
            required: false;
            isSignal: true;
        };
    },
    { onEditorCreated: 'onEditorCreated' },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillViewComponent, never>;

property quillEditor

quillEditor: QuillType;

property sanitize

readonly sanitize: _angular_core.InputSignal<boolean>;

property strict

readonly strict: _angular_core.InputSignal<boolean>;

property theme

readonly theme: _angular_core.InputSignal<string>;

property valueSetter

valueSetter: (quillEditor: QuillType, value: any) => any;

class QuillViewHTMLComponent

class QuillViewHTMLComponent {}

property content

readonly content: _angular_core.InputSignal<string>;

property innerHTML

readonly innerHTML: _angular_core.Signal<_angular_platform_browser.SafeHtml>;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    QuillViewHTMLComponent,
    'quill-view-html',
    never,
    {
        content: { alias: 'content'; required: false; isSignal: true };
        theme: { alias: 'theme'; required: false; isSignal: true };
        sanitize: { alias: 'sanitize'; required: false; isSignal: true };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillViewHTMLComponent, never>;

property sanitize

readonly sanitize: _angular_core.InputSignal<boolean>;

property theme

readonly theme: _angular_core.InputSignal<string>;

property themeClass

readonly themeClass: _angular_core.Signal<string>;

Interfaces

interface Blur

interface Blur {}

property editor

editor: QuillType;

property source

source: string;

interface ContentChange

interface ContentChange {}

property content

content: DeltaType;

property delta

delta: DeltaType;

property editor

editor: QuillType;

property html

html: string | null;

property oldDelta

oldDelta: DeltaType;

property source

source: string;

property text

text: string;

interface Focus

interface Focus {}

property editor

editor: QuillType;

property source

source: string;

interface Range

interface Range {}

property index

index: number;

property length

length: number;

interface SelectionChange

interface SelectionChange {}

property editor

editor: QuillType;

property oldRange

oldRange: Range | null;

property range

range: Range | null;

property source

source: string;

Enums

enum ValidationKind

enum ValidationKind {
    quillMinLength = 'quillMinLength',
    quillMaxLength = 'quillMaxLength',
    quillRequired = 'quillRequired',
}

member quillMaxLength

quillMaxLength = 'quillMaxLength'

member quillMinLength

quillMinLength = 'quillMinLength'

member quillRequired

quillRequired = 'quillRequired'

Type Aliases

type EditorChangeContent

type EditorChangeContent = ContentChange & {
    event: 'text-change';
};

type EditorChangeSelection

type EditorChangeSelection = SelectionChange & {
    event: 'selection-change';
};

Package Files (1)

types/ngx-quill.d.ts

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (3)

Badge

To add a badge like this oneto 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/ngx-quill.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-quill)

HTML

<a href="https://www.jsdocs.io/package/ngx-quill"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 21 days ago.
Package analyzed in 4368 ms.
Missing or incorrect documentation? Open an issue for this package.