New to Kendo UI for Angular? Start a free 30-day trial

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:

  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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

DirectiveAssociated Command
Typographical Emphases
kendoEditorBoldButtonbold
kendoEditorItalicButtonitalic
kendoEditorStrikethroughButtonstrikethrough
kendoEditorSubscriptButtonsubscript
kendoEditorSuperscriptButtonsuperscript
kendoEditorUnderlineButtonunderline
Alignment Actions
kendoEditorAlignCenterButtonalignCenter
kendoEditorAlignJustifyButtonalignJustify
kendoEditorAlignLeftButtonalignLeft
kendoEditorAlignRightButtonalignRight
Historical Context
kendoEditorRedoButtonredo
kendoEditorUndoButtonundo
Links Handling
kendoEditorUnlinkButtonunlink
Lists Implementation
kendoEditorInsertOrderedListButtoninsertOrderedList
kendoEditorInsertUnorderedListButtoninsertUnorderedList
Handle Indentation
kendoEditorIndentButtonindent
kendoEditorOutdentButtonoutdent
Common Buttons Behavior
kendoEditorCleanFormattingButtoncleanFormatting
Tables Creation and Editing
kendoEditorAddColumnAfterButtonaddColumnAfter
kendoEditorAddColumnBeforeButtonaddColumnBefore
kendoEditorAddRowAfterButtonaddRowAfter
kendoEditorAddRowBeforeButtonaddRowBefore
kendoEditorDeleteColumnButtondeleteColumn
kendoEditorDeleteRowButtondeleteRow
kendoEditorDeleteTableButtondeleteTable
kendo-editor-insert-table-buttonOpens a popup with table configurator

The following directives open various Editor insert dialogs.

DirectiveAction
kendoEditorInsertImageButtonOpen image options dialog
kendoEditorCreateLinkButtonOpen link options dialog
kendoEditorInsertFileButtonOpen file options dialog
kendoEditorViewSourceButtonOpen view source dialog

Dialogs

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

ActionAssociated Command
Insert imageinsertImage
Create linkcreateLink
Insert fileinsertFile
Update the sourcesetHTML

DropDownLists

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

DirectiveAssociated Command
kendoEditorFontFamilyfontFamily (accepts FontFamilyItem parameter)
kendoEditorFontSizefontSize (accepts FontSizeItem parameter)
kendoEditorFormatformat (accepts FormatItem parameter)

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.

DirectiveAssociated Command
kendoEditorForeColorforeColor
kendoEditorBackColorbackColor

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: