Toolbar Tools
The 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:
- Nest the
kendo-toolbartag inside thekendo-editortag. - 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.
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:
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.
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.
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—
foreColorandbackColor - Font size and family—
fontSizeandfontFamily - 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.
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/[^ !,?.\[\]{}()]+$/iafter—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.
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 Toolbar Tools with Editor Commands
The API of the Editor enables you to execute commands that modify the content.
The following example demonstrates how to call a bold command when the user clicks a toolbar button.
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.
