React HtmlEditor - toolbar

Configures the UI component'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

|

Element

|

jQuery

When this property is not set, the toolbar is placed in the UI component's container.

See Also

items[]

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

Type:

Array<Object | String>

Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'size' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'header' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'separator' | 'undo' | 'redo' | 'clear'

The toolbar provides predefined items and supports custom items. To add a predefined item 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");
        })
    )
)

Most of the predefined items are buttons. To customize a button, assign its name to the formatName property and specify the button properties 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 UI component instead of a button, specify the widget property and configure the UI component in the options object. In this case, you should also implement all the logic.

The toolbar provides a short syntax for implementing a custom drop-down menu with multiple choices. Refer to the formatName description for more information.

View Demo

multiline

Specifies whether or not items are arranged into multiple lines when their combined width exceeds the toolbar width.

Type:

Boolean

Default Value: true

View Demo