Components / Editor / API / EditorComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

EditorComponent

Represents the Kendo UI Editor component for Angular.

Selector

kendo-editor

Inputs

NameTypeDefaultDescription

applyToWord

boolean | ApplyToWordOptions

false

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.

disabled

boolean

Sets the disabled state of the component.

iframe

boolean

true

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.

iframeCss

EditorCssSettings

Allows applying custom CSS styles to the Editor in iframe mode.

pasteCleanupSettings

PasteCleanupSettings

Configures how pasted content is modified before it is added to the Editor (see example).

placeholder

string

The hint, which is displayed when the component is empty.

plugins

PluginsFn

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)

 pluginsCallback(defaultPlugins: Plugin[]): Plugin[] {
   const myPlugin = new Plugin({/custom plugin code/});
   return [...defaultPlugins, myPlugin];
 }

preserveWhitespace

boolean | "full"

false

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.

readonly

boolean

Sets the read-only state of the component.

resizable

boolean | EditorResizableOptions

false

Determines whether the Editor can be resized (see example).

schema

Schema<any>

Allows providing a custom schema. (see example)

value

string

Sets the value of the Editor (see example).

Fields

NameTypeDefaultDescription

selectionText

string

Returns the text which the current Editor selection contains (see example).

view

EditorView

Returns the ProseMirror EditorView object that manages the DOM structure that represents an editable document.

Events

NameTypeDescription

blur

EventEmitter<undefined>

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

focus

EventEmitter<undefined>

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

paste

EventEmitter<EditorPasteEvent>

Fires when the user performs paste in the content area of the Editor (see example). The event is preventable. If you cancel it, the Editor content will not change.

valueChange

EventEmitter<string>

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

Methods

blur

Manually blur the Editor.

exec

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

// Toggles the bold styling.
editor.exec('bold');

// Creates a bullet list.
editor.exec('insertUnorderedList');

// Creates a link.
editor.exec('createLink', { href: 'www.progress.com', title: 'Progress', target: 'window' });

// Inserts a file.
editor.exec('insertFile', { href: 'www.progress.com/resources/myfile.doc', title: 'My file', target: 'window' });

// Inserts a image.
editor.exec('insertImage', { src: 'www.progress.com/resources/logo.jpg', title: 'Progress', target: 'window' });

// Inserts a text at a given position. If no position is specified, the text will be inserted after the cursor.
editor.exec('insertText', { text: 'Hello World!', from: 0, to: 0 });

// Changes the format of a text block.
editor.exec('format', { tag: 'h2' });

// Changes the font size of the selected text.
editor.exec('fontSize', 24);

// Changes the content of the Editor.
editor.exec('setHTML', '<p>HTML content</p>');

// Creates and inserts a table with the specified number of rows and columns. Numbers are zero based.
this.editor.exec("insertTable", { rows: 3, cols: 5 });
Parameters

commandName

EditorCommand

The command that will be executed.

attr?

any

Optional parameters for the command. Apart from the following list, the parameters do not expect specific attributes when you call them:

  • format - Accepts an object with the tag property.

The supported tags are p and any of the h1 to h6 heading tags.

  • createLink - Accepts an object with the href, title, and target properties. The href property is mandatory.
  • setHTML - Accepts a string parameter.
  • insertTable - Accepts an object with the rows and cols properties. The number values are zero based.

focus

Manually focus the Editor.

openDialog

Opens a dialog.

// Opens a `createLink` dialog.
editor.openDialog('createLink');

// Opens a `viewSource` dialog.
editor.openDialog('viewSource');
Parameters

dialogName

DialogCommand

The name of the dialog that will open.

The supported values are:

  • createLink
  • viewSource
  • insertFile
  • insertImage
  • tableWizard

In this article

Not finding the help you need?

Contact Support