@progress/kendo-angular-editor

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterViewInit, ViewContainerRef, ElementRef, EventEmitter, ChangeDetectorRef, NgZone, SimpleChanges, Renderer2 } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { BehaviorSubject, Subject } from 'rxjs'; import { ToolBarComponent } from '@progress/kendo-angular-toolbar'; import { DialogService } from '@progress/kendo-angular-dialog'; import { EditorView, Schema } from '@progress/kendo-editor-common'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { Direction } from './common/direction'; import { EditorCommand, DialogCommand } from './common/commands'; import { PasteCleanupSettings } from './common/paste-cleanup-settings'; import { PluginsFn } from './common/plugins-function'; import { ApplyToWordOptions } from './common/apply-to-word-options'; import { ProviderService } from './common/provider.service'; import { EditorResizableOptions } from './common/resizable-options.interface'; import { EditorToolsService } from './tools/tools.service'; import { EditorPasteEvent } from './preventable-events/paste-event'; import { EditorCssSettings } from './common/css-settings.interface'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}). * * Use the Editor to create and edit rich text content in your Angular applications. * * @example * ```html * <kendo-editor [(value)]="editorValue"></kendo-editor> * ``` * @remarks * Supported children components are: {@link CustomMessagesComponent}, {@link ToolBarComponent}. */ export declare class EditorComponent implements AfterViewInit, ControlValueAccessor { private dialogService; private localization; private cdr; ngZone: NgZone; private element; private providerService; private toolsService; private renderer; /** * Sets the value of the Editor ([see example](slug:overview_editor)). * Use this property to update the Editor content programmatically. */ set value(value: string); get value(): string; /** * Sets the disabled state of the component. To disable the Editor in reactive forms, see [Forms Support](slug:formssupport_editor#toc-managing-the-editor-disabled-state-in-reactive-forms). */ set disabled(value: boolean); get disabled(): boolean; /** * Sets the read-only state of the component. * * When `true`, users cannot edit the content. * @default false */ set readonly(value: boolean); get readonly(): boolean; /** * If set to `false`, the Editor runs in non-encapsulated style mode. * The Editor content inherits styles from the page. * @default true */ iframe: boolean; /** * Applies custom CSS styles to the Editor in iframe mode. * Use this property to provide additional CSS for the Editor content. */ set iframeCss(settings: EditorCssSettings); get iframeCss(): EditorCssSettings; /** * When set to `true` or an `ApplyToWordOptions` object, emphasis or inline style commands apply to the whole word at the cursor. * @default false */ applyToWord: boolean | ApplyToWordOptions; /** * Provides a custom schema for the Editor ([see example]({% slug schema_editor %})). */ set schema(value: Schema); get schema(): Schema; /** * Defines a function to customize the plugins used by the Editor. * The function receives the default plugins and returns the plugins to use ([see example]({% slug plugins_editor %})). */ set plugins(fn: PluginsFn); get plugins(): PluginsFn; /** * Sets the hint text displayed when the Editor is empty. * Use this property to provide guidance to users. */ set placeholder(value: string); get placeholder(): string; /** * Controls whitespace handling in the Editor content. * Set to `true` to preserve whitespace and normalize newlines to spaces. * Set to `'full'` to preserve all whitespace. * @default false */ preserveWhitespace: boolean | 'full'; /** * Configures how pasted content is cleaned before it is added to the Editor ([see example]({% slug paste_cleanup %})). * Use this property to remove unwanted HTML, styles, or attributes from pasted content. */ pasteCleanupSettings: PasteCleanupSettings; /** * Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)). * Set to `true` or provide an object with resizing options. * @default false */ resizable: boolean | EditorResizableOptions; /** * Fires when the Editor value changes due to user interaction. * This event does not fire when the value changes programmatically through `ngModel` or form bindings * ([see example](slug:events_editor)). */ valueChange: EventEmitter<string>; /** * Fires when the Editor content area receives focus ([see example](slug:events_editor)). */ onFocus: EventEmitter<undefined>; /** * Fires when the user paste content into the Editor ([see example](slug:events_editor)). * This event is preventable. If you cancel it, the Editor content does not change. */ paste: EventEmitter<EditorPasteEvent>; /** * Fires when the Editor content area is blurred ([see example](slug:events_editor)). */ onBlur: EventEmitter<undefined>; hostClass: boolean; get resizableClass(): boolean; get isDisabled(): boolean; get isReadonly(): boolean; get dir(): Direction; get ariaDisabled(): boolean; get minWidth(): string; get maxWidth(): string; get minHeight(): string; get maxHeight(): string; /** * @hidden */ stateChange: BehaviorSubject<any>; /** * @hidden */ showLicenseWatermark: boolean; /** * @hidden */ licenseMessage?: string; get toolbar(): ToolBarComponent; get toolbarElement(): ElementRef; /** * Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object. * Use this property to access the underlying `EditorView` instance. */ get view(): EditorView; /** * Returns the text currently selected in the Editor ([see example]({% slug selection_editor %}#toc-retrieve-the-selected-text)). */ get selectionText(): string; /** * @hidden */ valueModified: Subject<any>; userToolBarComponent: ToolBarComponent; userToolBarElement: ElementRef; dialogContainer: ViewContainerRef; container: ViewContainerRef; direction: Direction; viewMountElement: HTMLElement; /** * @hidden */ focusChangedProgrammatically: boolean; /** * @hidden */ shouldEmitFocus: boolean; /** * @hidden */ focusableId: string; private defaultToolbar; private defaultToolbarComponent; private subs; private _view; private _value; private _disabled; private _readonly; private _schema; private _plugins; private _placeholder; private _styleObserver; private trOnChange; private htmlOnChange; private inForm; private _pasteEvent; private _iframeCss; private afterViewInit; private contentAreaLoaded; constructor(dialogService: DialogService, localization: LocalizationService, cdr: ChangeDetectorRef, ngZone: NgZone, element: ElementRef, providerService: ProviderService, toolsService: EditorToolsService, renderer: Renderer2); ngOnInit(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ setDisabledState(isDisabled: boolean): void; /** * @hidden */ iframeOnLoad(): void; /** * Executes a command on the currently selected text * ([more information and example]({% slug toolbartools_editor %}#toc-associating-toolbar-tools-with-editor-commands)). * * @param {EditorCommand} commandName - The command that will be executed. * @param {any} attr - Optional parameters for the command. */ exec(commandName: EditorCommand, attr?: any): void; /** * Opens a dialog. * @param {DialogCommand} dialogName - The name of the dialog that will open. */ openDialog(dialogName: DialogCommand): void; /** * Manually focus the Editor. */ focus(): void; /** * Manually blur the Editor. */ blur(): void; /** * @hidden */ getSource(): string; ngOnDestroy(): void; /** * @hidden */ writeValue(value: any): void; /** * @hidden */ registerOnChange(fn: Function): void; /** * @hidden */ registerOnTouched(fn: Function): void; /** * @hidden * Used by the TextBoxContainer to determine if the component is empty. */ isEmpty(): boolean; private initialize; private dispatchTransaction; private transformPastedContent; private transformPastedHTML; private transformPastedText; private changeValue; private onChangeCallback; private normalizeSize; private normalizeProperties; private onTouchedCallback; private onPaste; private dispatchPasteEvent; static ɵfac: i0.ɵɵFactoryDeclaration<EditorComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<EditorComponent, "kendo-editor", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "iframe": { "alias": "iframe"; "required": false; }; "iframeCss": { "alias": "iframeCss"; "required": false; }; "applyToWord": { "alias": "applyToWord"; "required": false; }; "schema": { "alias": "schema"; "required": false; }; "plugins": { "alias": "plugins"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "preserveWhitespace": { "alias": "preserveWhitespace"; "required": false; }; "pasteCleanupSettings": { "alias": "pasteCleanupSettings"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "paste": "paste"; "onBlur": "blur"; }, ["userToolBarComponent", "userToolBarElement"], ["kendo-toolbar"], true, never>; }