Toolbar Tools - Editor - Kendo UI for Angular

Components / Editor (Beta)

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-toolbar tag inside the kendo-editor tag.
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.

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 table lists the directives and the associated Editor commands which provide common behavior for the buttons.

Directive	Associated Command
`kendoEditorCleanFormattingButton`	`cleanFormatting`

The following table lists the directives and the associated Editor commands which 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 which 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 which add historical context for actions.

Directive	Associated Command
`kendoEditorRedoButton`	`redo`
`kendoEditorUndoButton`	`undo`

The following table lists the directives and the associated Editor commands which enable the handling of images.

Directive	Associated Command
`kendoEditorInsertImageButton`	`insertImage` (dialog control type)

The following table lists the directives and the associated Editor commands which 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 which implement lists.

Directive	Associated Command
`kendoEditorInsertOrderedListButton`	`insertOrderedList`
`kendoEditorInsertUnorderedListButton`	`insertUnorderedList`

The following table lists the directives and the associated Editor commands which handle indentation.

Directive	Associated Command
`kendoEditorIndentButton`	`indent`
`kendoEditorOutdentButton`	`outdent`

The following table lists the directives and the associated Editor commands which 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 which 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.

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.

For more information, refer to the article on supported custom control types by the Kendo UI ToolBar for Angular.

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);

Built-In Tools

Available Control Types

Implementation Directives and Components

Custom Tools

Associating Command Tools with Directives

Suggested Links

Was this article helpful?

Give article feedback

Kendo UI for Angular

Community

Web App Development

Complete .net Toolbox