toolbar

Configures the widget's toolbar.

Default Value: null

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

container

Specifies the container in which to place the toolbar.

Type:

String

|

DOM Node

|

jQuery

When this option is not set, the toolbar is placed in the widget's container.

items

Configures toolbar controls which allow users to format text and execute commands.

The toolbar provides built-in controls and supports custom controls. To add a built-in control to the toolbar, include it in the items array:

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [ "bold", "italic", "alignCenter", "undo", "redo" ]
        }
    })
})
Angular
HTML
TypeScript
<dx-html-editor>
    <dxo-toolbar [items]="[ 'bold', 'italic', 'alignCenter', 'undo', 'redo' ]"></dxo-toolbar>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
ASP.NET MVC Controls
C#
@(Html.DevExtreme().HtmlEditor()
    .ID("htmlEditor")
    .Toolbar(t => t.Items(items => {
        items.Add().FormatName("bold");
        items.Add().FormatName("italic");
        items.Add().FormatName("alignCenter");
        items.Add().FormatName("undo");
        items.Add().FormatName("redo");
    }))
)

The following built-in controls are available:

Formatting ControlsAction and Other Controls
  • background
  • bold
  • color
  • italic
  • link
  • strike
  • subscript
  • superscript
  • underline
  • blockquote
  • header
  • increaseIndent
  • decreaseIndent
  • orderedList
  • bulletList
  • alignLeft
  • alignCenter
  • alignRight
  • alignJustify
  • codeBlock
  • separator
  • undo
  • redo
  • clear

These controls are buttons. To customize one of them, assign its name to the formatName option and specify button options in the options object:

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainerContainer").dxHtmlEditor({
        toolbar: {
            items: [ // ...
            { 
                formatName: "clear", 
                options: { icon: "clear", type: "danger" }
            }]
        }
    })
})
Angular
TypeScript
HTML
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    items: any = [ // ...
    { 
        formatName: "clear", 
        options: { icon: "clear", type: "danger" }
    }];
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
<dx-html-editor>
    <dxo-toolbar [items]="items"></dxo-toolbar>
</dx-html-editor>
ASP.NET MVC Controls
C#
@(Html.DevExtreme().HtmlEditor()
    .ID("htmlEditor")
    .Toolbar(t => t.Items(items => {
        items.Add()
            .FormatName("clear")
            .Widget(w => w
                .Button()
                .Icon("clear")
                .Type(ButtonType.Danger)
            );
    }))
)

To use another widget instead of a button, specify the widget option and configure the widget in the options object. In this case, you should also implement all the logic.

The toolbar also provides short syntax for implementing a custom drop-down control with multiple choices. Refer to the formatName description for details.

View Demo