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 following table lists each control type of the Editor and its available editing commands.

Control Type Supported Commands
Buttons
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • bold
  • cleanFormatting
  • indent
  • insertOrderedList
  • insertUnorderedList
  • italic
  • outdent
  • redo
  • strikethrough
  • subscript
  • superscript
  • underline
  • undo
  • unlink
  • insertTable
  • addColumnAfter
  • addColumnBefore
  • addRowAfter
  • addRowBefore
  • deleteColumn
  • deleteRow
  • deleteTable

|Drop-down lists|

  • kendoEditorFontFamily
  • kendoEditorFormat
  • kendoEditorFontSize

|Dialogs |

The dialog control types load after the user clicks on the respective button UI.

  • createLink
  • insertFile
  • insertImage
  • viewSource

|Color pickers |
  • foreColor
  • backColor

Implementation Directives and Components

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

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