New to Kendo UI for AngularStart a free 30-day trial

EditorComponent

Represents the Kendo UI Editor component for Angular.

Use the Editor to create and edit rich text content in your Angular applications.

html
<kendo-editor [(value)]="editorValue"></kendo-editor>

Selector

kendo-editor

Inputs

NameTypeDefaultDescription

applyToWord

boolean | ApplyToWordOptions

false

When set to true or an ApplyToWordOptions object, emphasis or inline style commands apply to the whole word at the cursor.

disabled

boolean

Sets the disabled state of the component. To disable the Editor in reactive forms, see Forms Support.

iframe

boolean

true

If set to false, the Editor runs in non-encapsulated style mode. The Editor content inherits styles from the page.

iframeCss

EditorCssSettings

Applies custom CSS styles to the Editor in iframe mode. Use this property to provide additional CSS for the Editor content.

pasteCleanupSettings

PasteCleanupSettings

Configures how pasted content is cleaned before it is added to the Editor (see example). Use this property to remove unwanted HTML, styles, or attributes from pasted content.

placeholder

string

Sets the hint text displayed when the Editor is empty. Use this property to provide guidance to users.

plugins

PluginsFn

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).

preserveWhitespace

boolean | "full"

false

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.

readonly

boolean

false

Sets the read-only state of the component.

When true, users cannot edit the content.

resizable

boolean | EditorResizableOptions

false

Determines whether the Editor can be resized (see example). Set to true or provide an object with resizing options.

schema

Schema<any>

Provides a custom schema for the Editor (see example).

value

string

Sets the value of the Editor (see example). Use this property to update the Editor content programmatically.

Fields

NameTypeDefaultDescription

selectionText

string

Returns the text currently selected in the Editor (see example).

view

EditorView

Returns the ProseMirror EditorView object. Use this property to access the underlying EditorView instance.

Events

NameTypeDescription

blur

EventEmitter<undefined>

Fires when the Editor content area is blurred (see example).

focus

EventEmitter<undefined>

Fires when the Editor content area receives focus (see example).

paste

EventEmitter<EditorPasteEvent>

Fires when the user paste content into the Editor (see example). This event is preventable. If you cancel it, the Editor content does not change.

valueChange

EventEmitter<string>

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).

Methods

blur

Manually blur the Editor.

exec

Executes a command on the currently selected text (more information and example).

Parameters

commandName

EditorCommand

The command that will be executed.

attr?

any

Optional parameters for the command.

focus

Manually focus the Editor.

openDialog

Opens a dialog.

Parameters

dialogName

DialogCommand

The name of the dialog that will open.

In this article
SelectorInputsFieldsEventsMethods
Not finding the help you need?
Contact Support