Components / Editor (Beta) / API

EditorComponent

Represents the Kendo UI Editor component for Angular.

Selector

kendo-editor

Inputs

sandbox boolean

If set to true, the Editor will run in its sandbox mode. This means
that the styles of the external page will not be persisted in the Editor
and its content will not be affected by them.

value string

Sets the value of the Editor (see example).

Events

valueChange EventEmitter

Fires each time the value of the Editor is changed upon user interaction—
for example, when the component is blurred or the value is updated through the viewSource dialog.
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>');

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, blockquote, 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.

focus

Manually focus the Editor.

openDialog

Opens a dialog.

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

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

Parameters

dialogName DialogCommand

The name of the dialog that will open.

The supported values are:

  • createLink
  • viewSource
  • insertFile
  • insertImage