Components / Editor

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.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-editor [value]="value" style="height: 450px;">
          <kendo-toolbar>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
              <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>
              <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>
              <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>
              <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-editor-insert-table-button></kendo-editor-insert-table-button>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
              <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>
          </kendo-toolbar>
        </kendo-editor>
    `
})
export class AppComponent {
    public value = `
        <p>
            The Kendo Angular UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks and lists.
            The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards, and provides API for content manipulation.
        </p>
        <p>Features include:</p>
        <ul>
            <li>Text formatting</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlinks</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
        </ul>
    `;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EditorModule } from '@progress/kendo-angular-editor';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        EditorModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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](/kendo-angular-ui/components/editor/tools/#toc-buttons)
  • [Drop-down lists](/kendo-angular-ui/components/editor/tools/#toc-drop-down-lists)
  • [Dialogs](/kendo-angular-ui/components/editor/tools/#toc-dialogs)
  • [Color pickers](/kendo-angular-ui/components/editor/tools/#toc-color-pickers)

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 editing commands by control type.

Buttons

The Buttons control type supports the following commands:
alignCenter italic insertTable
alignJustify outdent addColumnAfter
alignLeft redo addColumnBefore
alignRight strikethrough addRowAfter
bold subscript addRowBefore
cleanFormatting superscript deleteColumn
indent underline deleteRow
insertOrderedList undo deleteTable
insertUnorderedList unlink

Drop-down lists

The Drop-down lists control type supports the following commands:
kendoEditorFontFamily
kendoEditorFormat
kendoEditorFontSize

Dialogs

The Dialogs control type supports the following commands:
createLink
insertFile
insertImage
viewSource

Color pickers

The Color pickers control type supports the following commands:
foreColor
backColor

Implementation Directives and Components

Depending on their toolbar control type, the built-in tools are implemented through the specific directives.

Buttons

According to the command name, the directive automatically sets the icon of the button, the click action, and the selected or disabled state.

The following tables list the directives and the associated Editor commands that provide common behavior for the buttons:

Directive Associated Command
kendoEditorCleanFormattingButton cleanFormatting

The following table lists the directives and the associated Editor commands that provide typographical emphases:

Directive Associated Command
kendoEditorBoldButton bold
kendoEditorItalicButton italic
kendoEditorStrikethroughButton strikethrough
kendoEditorSubscriptButton subscript
kendoEditorSuperscriptButton superscript
kendoEditorUnderlineButton underline

The following table lists the directives and the associated Editor commands that implement alignment actions:

Directive Associated Command
kendoEditorAlignCenterButton alignCenter
kendoEditorAlignJustifyButton alignJustify
kendoEditorAlignLeftButton alignLeft
kendoEditorAlignRightButton alignRight

The following table lists the directives and the associated Editor commands that add historical context for actions:

Directive Associated Command
kendoEditorRedoButton redo
kendoEditorUndoButton undo

The following table lists the directives and the associated Editor commands that enable the handling of images:

Directive Associated Command
kendoEditorInsertImageButton insertImage (dialog control type)

The following table lists the directives and the associated Editor commands that enable the handling of links:

Directive Associated Command
kendoEditorCreateLinkButton createLink (open dialog action)
kendoEditorInsertFileButton insertFile (open dialog action)
kendoEditorUnlinkButton unlink

The following table lists the directives and the associated Editor commands that implement lists:

Directive Associated Command
kendoEditorInsertOrderedListButton insertOrderedList
kendoEditorInsertUnorderedListButton insertUnorderedList

The following table lists the directives and the associated Editor commands that handle indentation:

Directive Associated Command
kendoEditorIndentButton indent
kendoEditorOutdentButton outdent

The following table lists the directives and the associated Editor commands that relate to the source of the content:

Directive Associated Command
kendoEditorViewSourceButton viewSource (open dialog action)

The following table lists the directives and the associated Editor commands that relate to table creation and editing:

Directive Associated Command
kendoEditorAddColumnAfterButton addColumnAfter
kendoEditorAddColumnBeforeButton addColumnBefore
kendoEditorAddRowAfterButton addRowAfter
kendoEditorAddRowBeforeButton addRowBefore
kendoEditorDeleteColumnButton deleteColumn
kendoEditorDeleteRowButton deleteRow
kendoEditorDeleteTableButton deleteTable

Drop-down lists

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

Directive Associated Command
kendoEditorFontFamily Changes the font family of a content block.
kendoEditorFontSize Changes the font size of a content block.
kendoEditorFormat Changes the format of a content block.

Color pickers

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

Directive Action
kendoEditorForeColor Associates a kendo-toolbar-colorpicker component with an Editor command that changes the foreground color of the current selection.
kendoEditorBackColor Associates a kendo-toolbar-colorpicker component with an Editor command that changes the background color of the current selection.

Editor specific tools

Each component automatically defines the icon and the target of the operations.

Component Action
kendo-editor-insert-table-button Opens a popup with table configurator.

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.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-editor #editor style="height: 400px;">
            <kendo-toolbar>
                <kendo-toolbar-button text="Bold button" (click)="editor.exec('bold');"></kendo-toolbar-button>
            </kendo-toolbar>
        </kendo-editor>
    `
})
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EditorModule } from '@progress/kendo-angular-editor';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        EditorModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-editor style="height: 400px;">
          <kendo-toolbar>
              <kendo-toolbar-buttongroup>
                  <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                  <kendo-toolbar-button customDirective></kendo-toolbar-button>
              </kendo-toolbar-buttongroup>
          </kendo-toolbar>
        </kendo-editor>
  `
})
export class AppComponent { }

import { Directive, Host, OnInit, OnDestroy } from '@angular/core';

import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
import { EditorComponent } from '@progress/kendo-angular-editor';
import { Subscription } from 'rxjs';

@Directive({
    selector: 'kendo-toolbar-button[customDirective]'
})
export class CustomDirective implements OnInit, OnDestroy {

    private subs: Subscription[] = [];

    constructor(
        private button: ToolBarButtonComponent,
        @Host() private editor: EditorComponent
    ) {}

    public ngOnInit(): void {
        this.button.icon = 'gear';

        this.subs.push(
            this.button.click.subscribe(() => {
                this.editor.exec('setHTML', '<p>My content</p>');
            })
        );
    }

    public ngOnDestroy(): void {
        this.subs.forEach((sub) => sub.unsubscribe());
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { CustomDirective } from './custom.directive';
import { EditorModule } from '@progress/kendo-angular-editor';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    EditorModule
  ],
  declarations: [AppComponent, CustomDirective],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article