@ckeditor/ckeditor5-angular/ckeditor.component.d.ts

Official Angular component for CKEditor 5 – the best browser-based rich text editor.

/**
 * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
import { ElementRef, EventEmitter, NgZone, type AfterViewInit, type OnChanges, type OnDestroy, type SimpleChanges } from '@angular/core';
import type { ContextWatchdog, EditorWatchdog, WatchdogConfig, Editor, EditorConfig, GetEventInfo, ModelDocumentChangeEvent, ViewDocumentBlurEvent, ViewDocumentFocusEvent } from 'ckeditor5';
import type { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
export interface BlurEvent<TEditor extends Editor = Editor> {
    event: GetEventInfo<ViewDocumentBlurEvent>;
    editor: TEditor;
}
export interface FocusEvent<TEditor extends Editor = Editor> {
    event: GetEventInfo<ViewDocumentFocusEvent>;
    editor: TEditor;
}
export interface ChangeEvent<TEditor extends Editor = Editor> {
    event: GetEventInfo<ModelDocumentChangeEvent>;
    editor: TEditor;
}
export declare class CKEditorComponent<TEditor extends Editor = Editor> implements AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {
    /**
     * The reference to the DOM element created by the component.
     */
    private elementRef;
    /**
     * The constructor of the editor to be used for the instance of the component.
     * It can be e.g. the `ClassicEditorBuild`, `InlineEditorBuild` or some custom editor.
     */
    editor?: {
        create(sourceElementOrData: HTMLElement | string, config?: EditorConfig): Promise<TEditor>;
        EditorWatchdog: typeof EditorWatchdog;
    };
    /**
     * The configuration of the editor.
     * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
     * to learn more.
     */
    config: EditorConfig;
    /**
     * The initial data of the editor. Useful when not using the ngModel.
     * See https://angular.io/api/forms/NgModel to learn more.
     */
    data: string;
    /**
     * Tag name of the editor component.
     *
     * The default tag is 'div'.
     */
    tagName: string;
    /**
     * The context watchdog.
     */
    watchdog?: ContextWatchdog;
    /**
     * Config for the EditorWatchdog.
     */
    editorWatchdogConfig?: WatchdogConfig;
    /**
     * Allows disabling the two-way data binding mechanism. Disabling it can boost performance for large documents.
     *
     * When a component is connected using the [(ngModel)] or [formControl] directives and this value is set to true then none of the data
     * will ever be synchronized.
     *
     * An integrator must call `editor.data.get()` manually once the application needs the editor's data.
     * An editor instance can be received in the `ready()` callback.
     */
    disableTwoWayDataBinding: boolean;
    /**
     * When set `true`, the editor becomes read-only.
     * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#member-isReadOnly
     * to learn more.
     */
    set disabled(isDisabled: boolean);
    get disabled(): boolean;
    /**
     * Fires when the editor is ready. It corresponds with the `editor#ready`
     * https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready
     * event.
     */
    ready: EventEmitter<TEditor>;
    /**
     * Fires when the content of the editor has changed. It corresponds with the `editor.model.document#change`
     * https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_document-Document.html#event-change
     * event.
     */
    change: EventEmitter<ChangeEvent<TEditor>>;
    /**
     * Fires when the editing view of the editor is blurred. It corresponds with the `editor.editing.view.document#blur`
     * https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_document-Document.html#event-event:blur
     * event.
     */
    blur: EventEmitter<BlurEvent<TEditor>>;
    /**
     * Fires when the editing view of the editor is focused. It corresponds with the `editor.editing.view.document#focus`
     * https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_document-Document.html#event-event:focus
     * event.
     */
    focus: EventEmitter<FocusEvent<TEditor>>;
    /**
     * Fires when the editor component crashes.
     */
    error: EventEmitter<unknown>;
    /**
     * The instance of the editor created by this component.
     */
    get editorInstance(): TEditor | null;
    /**
     * The editor watchdog. It is created when the context watchdog is not passed to the component.
     * It keeps the editor running.
     */
    private editorWatchdog?;
    /**
     * If the component is read–only before the editor instance is created, it remembers that state,
     * so the editor can become read–only once it is ready.
     */
    private initiallyDisabled;
    /**
     * An instance of https://angular.io/api/core/NgZone to allow the interaction with the editor
     * withing the Angular event loop.
     */
    private ngZone;
    /**
     * A callback executed when the content of the editor changes. Part of the
     * `ControlValueAccessor` (https://angular.io/api/forms/ControlValueAccessor) interface.
     *
     * Note: Unset unless the component uses the `ngModel`.
     */
    private cvaOnChange?;
    /**
     * A callback executed when the editor has been blurred. Part of the
     * `ControlValueAccessor` (https://angular.io/api/forms/ControlValueAccessor) interface.
     *
     * Note: Unset unless the component uses the `ngModel`.
     */
    private cvaOnTouched?;
    /**
     * Reference to the source element used by the editor.
     */
    private editorElement?;
    /**
     * A lock flag preventing from calling the `cvaOnChange()` during setting editor data.
     */
    private isEditorSettingData;
    private id;
    getId(): string;
    constructor(elementRef: ElementRef, ngZone: NgZone);
    private checkVersion;
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): Promise<void>;
    writeValue(value: string | null): void;
    registerOnChange(callback: (data: string) => void): void;
    registerOnTouched(callback: () => void): void;
    setDisabledState(isDisabled: boolean): void;
    /**
     * Creates the editor instance, sets initial editor data, then integrates
     * the editor with the Angular component. This method does not use the `editor.data.set()`
     * because of the issue in the collaboration mode (#6).
     */
    private attachToWatchdog;
    private getConfig;
    /**
     * Integrates the editor with the component by attaching related event listeners.
     */
    private setUpEditorEvents;
    static ɵfac: i0.ɵɵFactoryDeclaration<CKEditorComponent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CKEditorComponent<any>, "ckeditor", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; "data": { "alias": "data"; "required": false; }; "tagName": { "alias": "tagName"; "required": false; }; "watchdog": { "alias": "watchdog"; "required": false; }; "editorWatchdogConfig": { "alias": "editorWatchdogConfig"; "required": false; }; "disableTwoWayDataBinding": { "alias": "disableTwoWayDataBinding"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "ready": "ready"; "change": "change"; "blur": "blur"; "focus": "focus"; "error": "error"; }, never, never, false, never>;
}