EditorComponent
Represents the Kendo UI Editor component for Angular.
Selector
kendo-editor
Inputs
iframe
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.
pasteCleanupSettings
Configures how pasted content is modified before it is added to the Editor. (see example)
updateInterval
number
By design, the Editor emits valueChange
, updates the model and the ToolBar state on each keystroke.
When you are interested in ignoring the new values for a given amout of time and take only the most recent one, you can use the updateInterval
property.
A possible use case is to get the new values and to update the ToolBar state at a maximum rate per second in order to speed up your application.
The specified interval (in milliseconds) should be a positive number.
By default the updateInterval
is set to 100 miliseconds. If set to zero the delay will be disabled entirely.
disabled
boolean
Sets the disabled state of the component.
readonly
boolean
Sets the read-only state of the component.
schema
Schema
Allows providing a custom schema. (see example)
value
string
Sets the value of the Editor (see example).
Fields
view
EditorView
Returns the ProseMirror EditorView object that manages the DOM structure that represents an editable document.
Events
valueChange
EventEmitter<string>
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>');
// 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
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 thetag
property. The supported tags arep
,blockquote
, and any of theh1
toh6
heading tags.createLink
- Accepts an object with thehref
,title
, andtarget
properties. Thehref
property is mandatory.setHTML
- Accepts astring
parameter.insertTable
- Accepts an object with therows
andcols
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
The name of the dialog that will open.
The supported values are:
createLink
viewSource
insertFile
insertImage
tableWizard