# Toolbar Tools The [Angular Editor](https://www.telerik.com/kendo-angular-ui/components/editor) provides user interface tools and directives for associating these tools with edit-action commands through the Kendo UI for Angular [`ToolBarComponent`](https://www.telerik.com/kendo-angular-ui/components/toolbar/api/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](https://www.telerik.com/kendo-angular-ui/components/editor/tools#built-in-tools) or create and implement [custom tools](https://www.telerik.com/kendo-angular-ui/components/editor/tools#custom-tools). ## Built-In Tools Out of the box, the Editor provides text formatting, list, images and link management options. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/all-tools/source.txt) ### 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](https://www.telerik.com/kendo-angular-ui/components/editor/tools#buttons) * [Dialogs](https://www.telerik.com/kendo-angular-ui/components/editor/tools#dialogs) * [DropDownLists](https://www.telerik.com/kendo-angular-ui/components/editor/tools#dropdownlists) * [ColorPickers](https://www.telerik.com/kendo-angular-ui/components/editor/tools#colorpickers) Each control type supports a set of commands. For a list of all Editor commands, refer to the [Editor API](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcommand). 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](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorboldbuttondirective) | `bold` | | [kendoEditorItalicButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoritalicbuttondirective) | `italic` | | [kendoEditorStrikethroughButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorstrikethroughbuttondirective) | `strikethrough` | | [kendoEditorSubscriptButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorsubscriptbuttondirective) | `subscript` | | [kendoEditorSuperscriptButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorsuperscriptbuttondirective) | `superscript` | | [kendoEditorUnderlineButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorunderlinebuttondirective) | `underline` | | **Alignment Actions** | | | [kendoEditorAlignCenterButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoraligncenterbuttondirective) | `alignCenter` | | [kendoEditorAlignJustifyButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoralignjustifybuttondirective) | `alignJustify` | | [kendoEditorAlignLeftButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoralignleftbuttondirective) | `alignLeft` | | [kendoEditorAlignRightButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoralignrightbuttondirective) | `alignRight` | | **Historical Context** | | | [kendoEditorRedoButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorredobuttondirective) | `redo` | | [kendoEditorUndoButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorundobuttondirective) | `undo` | | **Links Handling** | | | [kendoEditorUnlinkButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorunlinkbuttondirective) | `unlink` | | **Lists Implementation** | | | [kendoEditorInsertOrderedListButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorinsertorderedlistbuttondirective) | `insertOrderedList` | | [kendoEditorInsertUnorderedListButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorinsertunorderedlistbuttondirective) | `insertUnorderedList` | | **Handle Indentation** | | | [kendoEditorIndentButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorindentbuttondirective) | `indent` | | [kendoEditorOutdentButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoroutdentbuttondirective) | `outdent` | | **Common Buttons Behavior** | | | [kendoEditorCleanFormattingButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcleanformattingbuttondirective) | `cleanFormatting` | | [kendoEditorPrintButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorprintdirective) | `print` | | [kendoEditorSelectAllButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorselectallbuttondirective) | `selectAll` | | **Tables Creation and Editing** | | | [kendoEditorAddColumnAfterButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoraddcolumnafterbuttondirective) | `addColumnAfter` | | [kendoEditorAddColumnBeforeButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoraddcolumnbeforebuttondirective) | `addColumnBefore` | | [kendoEditorAddRowAfterButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoraddrowafterbuttondirective) | `addRowAfter` | | [kendoEditorAddRowBeforeButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editoraddrowbeforebuttondirective) | `addRowBefore` | | [kendoEditorDeleteColumnButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editordeletecolumnbuttondirective) | `deleteColumn` | | [kendoEditorDeleteRowButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editordeleterowbuttondirective) | `deleteRow` | | [kendoEditorDeleteTableButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editordeletetablebuttondirective) | `deleteTable` | | [kendo-editor-insert-table-button](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorinserttablebuttoncomponent) | Opens a popup with table configurator | The following directives open various Editor insert [dialogs](https://www.telerik.com/kendo-angular-ui/components/editor/tools#dialogs). | Directive | Action | | :------------------------------------------------------------------------------------------------------------------------------ | :------------------------ | | [kendoEditorInsertImageButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorinsertimagebuttondirective) | Open image options dialog | | [kendoEditorCreateLinkButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcreatelinkbuttondirective) | Open link options dialog | | [kendoEditorInsertFileButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorinsertfilebuttondirective) | Open file options dialog | | [kendoEditorViewSourceButton](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorviewsourcebuttondirective) | 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](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorfontfamilycomponent) | `fontFamily` (accepts [FontFamilyItem](https://www.telerik.com/kendo-angular-ui/components/editor/api/fontfamilyitem) parameter) | | [kendoEditorFontSize](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorfontsizecomponent) | `fontSize` (accepts [FontSizeItem](https://www.telerik.com/kendo-angular-ui/components/editor/api/fontsizeitem) parameter) | | [kendoEditorFormat](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorformatcomponent) | `format` (accepts [FormatItem](https://www.telerik.com/kendo-angular-ui/components/editor/api/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`](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorfontsizecomponent#data) option takes a collection of [`FontSizeItem`](https://www.telerik.com/kendo-angular-ui/components/editor/api/fontsizeitem) objects that constitute the custom font-sizes. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/font-size-tool/source.txt) #### 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](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcolorpickercomponent) component that changes the foreground and background color of the current selection. | Directive | Associated Command | | :-------------------------------------------------------------------------------------------------------------- | :----------------- | | [kendoEditorForeColor](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorforecolordirective) | `foreColor` | | [kendoEditorBackColor](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorbackcolordirective) | `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`](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcomponent#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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/apply-to-word/source.txt) ### Customizing Word Delimiters The [`applyToWord`](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcomponent#applytoword) property also accepts an [`ApplyToWordOptions`](https://www.telerik.com/kendo-angular-ui/components/editor/api/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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/apply-to-custom-area/source.txt) ## 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 To add custom content such as a title, label, dropdown list, input field, or other application-specific control, create an Angular component for the custom content. To use the component as an Editor toolbar tool: 1. Extend the [`ToolBarToolComponent`](https://www.telerik.com/kendo-angular-ui/components/toolbar/api/toolbartoolcomponent) class and register the component as a `ToolBarToolComponent` provider. ```ts @Component({ providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }] }) export class CustomToolComponent extends ToolBarToolComponent {} ``` 2. Define the custom content in an `` and expose the template through a `@ViewChild` field named `toolbarTemplate`. ```html editor.toolbar.title.component.html ``` ```ts editor.toolbar.title.component.ts @ViewChild('toolbarTemplate', { static: true }) public declare toolbarTemplate: TemplateRef; ``` 3. Add the custom component inside the Editor `kendo-toolbar` element. ```html ``` To configure overflow behavior and keyboard navigation for custom tools, see [Custom Control Types in the Kendo UI ToolBar for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/toolbar/custom-control-types). The following example demonstrates a document-editing workflow with a custom document type selector before the formatting tools and custom Draft and Publish controls aligned to the right of the toolbar. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/toolbar-title/source.txt) ### 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`](https://angular.dev/api/core/Host) decorator. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/custom-directive/source.txt) ### Associating Toolbar Tools with Editor Commands To execute commands that modify the text of the Editor, you can use the [`exec`](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcomponent#exec) method of the component. The method accepts two arguments—command name and attributes (optional). ```html ``` The following example demonstrates how to call a `bold` command when the user clicks a toolbar button. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/editor/tool-exec-command/source.txt) 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](http://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', '`

HTML content

`'); | | `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](https://www.telerik.com/kendo-angular-ui/components/editor/api) * [API Reference of the EditorComponent](https://www.telerik.com/kendo-angular-ui/components/editor/api/editorcomponent) * [Angular Editor](https://www.telerik.com/kendo-angular-ui/editor)