Toolbar Tools

The Angular Editor provides user interface tools and directives for associating these tools with edit-action commands through the Kendo UI for Angular ToolBarComponent.

By default, the Editor supports a default toolbar configuration which includes basic formatting controls and list options.

To add, remove, or regroup the default tools:

1. Nest the kendo-toolbar tag inside the kendo-editor tag.
2. Either include specific built-in tools or create and implement custom tools.

Built-In Tools

Out of the box, the Editor provides text formatting, list, images and link management options.

Change Theme

Theme

Loading ...

Available Control Types

Depending on their visual implementation, the built-in tools are grouped in toolbar control types. The Kendo UI for Angular Editor provides the following control types:

• Buttons
• Dialogs
• DropDownLists
• ColorPickers

Each control type supports a set of commands. For a list of all Editor commands, refer to the Editor API.

The following tables list the directives and components with their associated commands by control type.

Buttons

The built-in tools are implemented through specific directives and components, which automatically sets the icon of the button, click action, and the selected or disabled state.

Directive	Associated Command
Typographical Emphases
kendoEditorBoldButton	bold
kendoEditorItalicButton	italic
kendoEditorStrikethroughButton	strikethrough
kendoEditorSubscriptButton	subscript
kendoEditorSuperscriptButton	superscript
kendoEditorUnderlineButton	underline
Alignment Actions
kendoEditorAlignCenterButton	alignCenter
kendoEditorAlignJustifyButton	alignJustify
kendoEditorAlignLeftButton	alignLeft
kendoEditorAlignRightButton	alignRight
Historical Context
kendoEditorRedoButton	redo
kendoEditorUndoButton	undo
Links Handling
kendoEditorUnlinkButton	unlink
Lists Implementation
kendoEditorInsertOrderedListButton	insertOrderedList
kendoEditorInsertUnorderedListButton	insertUnorderedList
Handle Indentation
kendoEditorIndentButton	indent
kendoEditorOutdentButton	outdent
Common Buttons Behavior
kendoEditorCleanFormattingButton	cleanFormatting
kendoEditorPrintButton	print
kendoEditorSelectAllButton	selectAll
Tables Creation and Editing
kendoEditorAddColumnAfterButton	addColumnAfter
kendoEditorAddColumnBeforeButton	addColumnBefore
kendoEditorAddRowAfterButton	addRowAfter
kendoEditorAddRowBeforeButton	addRowBefore
kendoEditorDeleteColumnButton	deleteColumn
kendoEditorDeleteRowButton	deleteRow
kendoEditorDeleteTableButton	deleteTable
kendo-editor-insert-table-button	Opens a popup with table configurator

The following directives open various Editor insert dialogs.

Directive	Action
kendoEditorInsertImageButton	Open image options dialog
kendoEditorCreateLinkButton	Open link options dialog
kendoEditorInsertFileButton	Open file options dialog
kendoEditorViewSourceButton	Open view source dialog

Dialogs

The following commands are executed when the corresponding Dialog action is confirmed.

Action	Associated Command
Insert image	insertImage
Create link	createLink
Insert file	insertFile
Update the source	setHTML

DropDownLists

Each directive automatically defines the options of the drop-down list and sets its value.

Directive	Associated Command
kendoEditorFontFamily	fontFamily (accepts FontFamilyItem parameter)
kendoEditorFontSize	fontSize (accepts FontSizeItem parameter)
kendoEditorFormat	format (accepts FormatItem parameter)

All of these tools allow providing a customized options collection for their respective styling setting.

For example, the font size tool can be used with all valid font-size units, e.g. px, rem, etc. Its data option takes a collection of FontSizeItem objects that constitute the custom font-sizes.

Change Theme

Theme

Loading ...

ColorPickers

Each directive automatically defines the icon and the target of the operation over the color or background-color CSS properties.

The supported commands associate a kendo-toolbar-colorpicker component that changes the foreground and background color of the current selection.

Directive	Associated Command
kendoEditorForeColor	foreColor
kendoEditorBackColor	backColor

Applying Commands to Words

By default, tools which apply text modifiers are affecting the current selection only (as in Google Docs). Those are the commands associated with:

• Typographical emphases—bold, italic, underline, strikethrough, superscript, subscript
• Fore and Background color—foreColor and backColor
• Font size and family—fontSize and fontFamily
• Link creation—createLink

To apply the respective tool command to the whole word the cursor is in, when no selection is present (as in MS Word), set the applyToWord option to true.

If there is an applied selection, the command will only affect that section, instead of the whole word.

The following example demonstrates how to apply text modifying commands to the whole word the cursor is in.

Change Theme

Theme

Loading ...

Customizing Word Delimiters

The applyToWord property also accepts an ApplyToWordOptions configuration object, which enables you to configure the following options:

• before—Regular expression of consequtive characters which will delimit the start of a word, when applying a command. The default value is /[^ !,?.\[\]{}()]+$/i
• after—Regular expression of consequtive characters which will delimit the end of a word, when applying a command. The default value is /^[^ !,?.\[\]{}()]+/i

The default word delimiters are white-space and the following characters ! , ? . [ ] { } ( )

The following example demonstrates how to specify custom word delimiters via regular expressions. For the purposes of the demo, only a line terminator will be considered a delimiter.

Change Theme

Theme

Loading ...

Custom Tools

Depending on the requirements of your project, the Editor enables you to create and implement your own custom tools.

Adding Custom UI Elements to the Toolbar

For more information, refer to the article on supported custom control types by the Kendo UI ToolBar for Angular.

Associating Command Tools with Directives

You can also create custom directives that control the look and behavior of the toolbar tools.

The following example demonstrates how to create a directive that sets the icon of the button and executes an Editor command on click. You can obtain a reference to the Editor through the Angular Host decorator.

Change Theme

Theme

Loading ...

Associating Toolbar Tools with Editor Commands

To execute commands that modify the text of the Editor, you can use the exec method of the component. The method accepts two arguments—command name and attributes (optional).

html

<kendo-toolbar-button
    ext="Insert HTML"
    (click)="editor.exec('setHTML', '<p>HTML content</p>')"
></kendo-toolbar-button>

The following example demonstrates how to call a bold command when the user clicks a toolbar button.

Change Theme

Theme

Loading ...

The table below lists all commands the exec method supports.

Command	Description	Usage
alignLeft	Aligns the text to the left.	editor.exec('alignLeft');
alignCenter	Aligns the text to the center.	editor.exec('alignCenter');
alignRight	Aligns the text to the right.	editor.exec('alignRight');
alignJustify	Justifies the text.	editor.exec('alignJustify');
addColumnBefore	Adds a column before the current position.	editor.exec('addColumnBefore');
addColumnAfter	Adds a column after the current position.	editor.exec('addColumnAfter');
addRowBefore	Adds a row before the current position.	editor.exec('addRowBefore');
addRowAfter	Adds a row after the current position.	editor.exec('addRowAfter');
bold	Toggles the bold styling.	editor.exec('bold');
backColor	Sets the background color.	editor.exec('backColor', { value: '#ffff00' });
blockquote	Applies a blockquote style.	editor.exec('blockquote');
createLink	Creates a hyperlink.	editor.exec('createLink', { href: 'www.progress.com', title: 'Progress', target: 'window' });
cleanFormat	Removes formatting.	editor.exec('cleanFormat');
cleanFormatting	Cleans formatting.	editor.exec('cleanFormatting');
deleteRow	Deletes the current row.	editor.exec('deleteRow');
deleteColumn	Deletes the current column.	editor.exec('deleteColumn');
deleteTable	Deletes the table.	editor.exec('deleteTable');
format	Changes the format of a text block.	editor.exec('format', { tag: 'h2' });
fontFamily	Changes the font family.	editor.exec('fontFamily', { value: 'Arial' });
fontSize	Changes the font size of the selected text.	editor.exec('fontSize', 24);
foreColor	Sets the text color.	editor.exec('foreColor', { value: '#ff0000' });
italic	Toggles the italic styling.	editor.exec('italic');
insertFile	Inserts a file.	editor.exec('insertFile', { href: 'fileLink', title: 'My file', target: 'window' });
insertImage	Inserts an image.	editor.exec('insertImage', { src: 'imageLink', title: 'Progress', target: 'window' });
insertOrderedList	Inserts an ordered list.	editor.exec('insertOrderedList');
insertUnorderedList	Inserts an bullet list.	editor.exec('insertUnorderedList');
insertText	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 });
indent	Indents the text.	editor.exec('indent');
insertTable	Creates and inserts a table with the specified number of rows and columns. Numbers are zero based.	editor.exec('insertTable', { rows: 3, cols: 5 });
mergeCells	Merges selected cells.	editor.exec('mergeCells');
outdent	Outdents the text.	editor.exec('outdent');
redo	Redoes the last undone action.	editor.exec('redo');
strikethrough	Toggles the strikethrough styling.	editor.exec('strikethrough');
subscript	Toggles subscript styling.	editor.exec('subscript');
superscript	Toggles superscript styling.	editor.exec('superscript');
splitCell	Splits the current cell.	editor.exec('splitCell');
selectAll	Selects all content.	editor.exec('selectAll');
setHTML	Changes the content of the Editor.	editor.exec('setHTML', '<p>HTML content</p>');
underline	Toggles the underline styling.	editor.exec('underline');
undo	Undoes the last action.	editor.exec('undo');
unlink	Removes the hyperlink.	editor.exec('unlink');

Suggested Links

• API Index of the Editor
• API Reference of the EditorComponent
• Angular Rich Text Editor