@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 %}). */ 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)). */ set value(value: string); get value(): string; /** * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [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. * * @default false */ set readonly(value: boolean); get readonly(): boolean; /** * If set to `false`, the Editor will run in style non-encapsulated mode. This means * that the styles of the page will be persisted in the Editor and its content will be affected by them. * @default true */ iframe: boolean; /** * Allows applying custom CSS styles to the Editor in iframe mode. */ set iframeCss(settings: EditorCssSettings); get iframeCss(): EditorCssSettings; /** * If set to `true` or `ApplyToWordOptions` object, commands that apply emphasis or inline styles will be applied to the whole word the cursor is in. * @default false */ applyToWord: boolean | ApplyToWordOptions; /** * Allows providing a custom schema. ([see example]({% slug schema_editor %})) */ set schema(value: Schema); get schema(): Schema; /** * Defines a function which determines the plugins that will be used when initializing the Editor. * It exposes the default plugins collection as an argument, and returns * the plugins collection that will be used when creating the Editor component. ([see example]({% slug plugins_editor %})) */ set plugins(fn: PluginsFn); get plugins(): PluginsFn; /** * The hint, which is displayed when the component is empty. */ set placeholder(value: string); get placeholder(): string; /** * By default, whitespace is collapsed as per HTML's rules. * Set to `true` to preserve whitespace, but normalize newlines to spaces. * Set to `'full'` to preserve whitespace entirely. In this case the default ProseMirror behavior is to parse white space into nodes. * * @default false */ preserveWhitespace: boolean | 'full'; /** * Configures how pasted content is modified before it is added to the Editor ([see example]({% slug paste_cleanup %})). */ pasteCleanupSettings: PasteCleanupSettings; /** * Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)). * @default false */ resizable: boolean | EditorResizableOptions; /** * Fires each time the value of the Editor is changed upon user interaction— * for example, when the value is updated through typing in the content area or using some of the Editor tools ([see example](slug:events_editor)). * When the value of the Editor is programmatically changed through its API (`ngModel`) or form binding (`formControl`), * the `valueChange` event is not triggered because it might cause a mix-up with the * built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings. */ valueChange: EventEmitter<string>; /** * Fires when the content area of the Editor is focused ([see example](slug:events_editor)). */ onFocus: EventEmitter<undefined>; /** * Fires when the user performs paste in the content area of the Editor ([see example](slug:events_editor)). * The event is preventable. If you cancel it, the Editor content will not change. */ paste: EventEmitter<EditorPasteEvent>; /** * Fires when the content area of the Editor is blurred ([see example](slug:events_editor)). */ onBlur: EventEmitter<undefined>; hostClass: boolean; get resizableClass(): boolean; get isDisabled(): boolean; get isReadonly(): boolean; get isIE(): 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; get toolbar(): ToolBarComponent; get toolbarElement(): ElementRef; /** * Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object * that manages the DOM structure that represents an editable document. */ get view(): EditorView; /** * Returns the text which the current Editor selection contains ([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>; }