React HtmlEditor - toolbar

Configures the widget's toolbar.

Type:

dxHtmlEditorToolbar

Default Value: null

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

See Also

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.

See Also

items

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

Type:

Object

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
Razor C#
@(Html.DevExtreme().HtmlEditor()
    .Toolbar(t => t
        .Items(i => {
            i.Add().FormatName("bold");
            i.Add().FormatName("italic");
            i.Add().FormatName("alignCenter");
            i.Add().FormatName("undo");
            i.Add().FormatName("redo");
        })
    )
)

The following built-in controls are available:

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

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

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").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
Razor C#
@(Html.DevExtreme().HtmlEditor()
    .Toolbar(t => t
        .Items(i => { 
            i.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 more information.

View Demo