React HtmlEditor - toolbar.items

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:

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [ "bold", "italic", "alignCenter", "undo", "redo" ]
        }
    })
})

<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
    ],
    // ...
})

@(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:

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

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [ // ...
            { 
                formatName: "clear", 
                options: { icon: "clear", type: "danger" }
            }]
        }
    })
})

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>

@(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

To customize a built-in control, assign its name to this option and specify the other control options. See the full list of available controls in the items description.

This option also accepts names of formats with multiple choices. In addition to the format name, specify formatValues. On the toolbar, such formats are represented by SelectBox widgets whose options you can specify in the options object.

View Demo

In the following code, the header and size formats are configured as described in the previous paragraph:

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [ // ...
            {
                formatName: "header",
                formatValues: [1, 2, 3, false],
                options: {
                    width: 150
                }
            }, {
                formatName: "size",
                formatValues: ["11px", "14px", "16px"]
            }]
        }
    })
})

import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    items: any = [ // ...
    {
        formatName: "header",
        formatValues: [1, 2, 3, false],
        options: {
            width: 150
        }
    }, {
        formatName: "size",
        formatValues: ["11px", "14px", "16px"]
    }];
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})

<dx-html-editor>
    <dxo-toolbar [items]="items"></dxo-toolbar>
</dx-html-editor>

The following tables list available formats and their values categorized in three groups: inline (or text), block, and embedded formats.

Embedded formats

See Also

• widget

Formats with multiple choices are represented by SelectBox widgets whose options you can specify in the options object.

Use the ToolbarItemLocateInMenuMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Always, Never, and Auto.

Whatever template you use for widget items (default or a custom) will be located according to the value specified for the location field in the item data source object.

Use the ToolbarItemLocation enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Before, After, and Center.

See Also

• Toolbar - Specify Item Location

Whether you use a default or a custom template for menu items, you can specify a specific template for a particular menu item. To do so, set the menuItemTemplate field for the data source object of this menu item. The following types of the specified value are available.

• Assign a string containing the name of the required template.
• Assign a jQuery object of the template's container.
• Assign a DOM Node of the template's container.
• Assign a function that returns the jQuery object or a DOM Node of the template's container.

See Also

• Custom Templates

This data source field is used by a default item template. If you use the default template for your widget items, and specify the widget field in the toolbar data source, you can specify the options field as well. Set the configuration options that are exposed by the configuration object of the specified widget.

See Also

• Toolbar - Specify Item Type

The text should be specified in the options configuration object.

Use the ToolbarItemShowTextMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Always and InMenu.

Whether you use a default or a custom template for widget items, you can specify a specific template for a particular item. To do so, set the template field for the data source object of this item. The following types of the specified value are available.

• Assign a string containing the name of the required template.
• Assign a jQuery object of the template's container.
• Assign a DOM Node of the template's container.
• Assign a function that returns the jQuery object or a DOM Node of the template's container.

See Also

• Custom Templates

Configure the specified widget in the options object. You can find information on available widget options in the widget's API reference.

View Demo

In the following example, the CheckBox widget with a label and a custom valueChanged event handler is added as a custom toolbar control. The locateInMenu option set to "never" ensures that the toolbar control is never hidden to the overflow menu.

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [ // ...
            {
                widget: "dxCheckBox",
                options: {
                    text: "My Format",  
                    onValueChanged: function(e) {
                        // Implement your logic here
                    },
                    // ...
                },
                locateInMenu: "never"
            }]
        }
    })
})

import { DxHtmlEditorModule, DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    items: any = [ // ...
    {
        widget: "dxCheckBox",
        options: {
            text: "My Format",
            onValueChanged: function(e) {
                // Implement your logic here
            },
            // ...
        },
        locateInMenu: "never"
    }];
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule,
        DxCheckBoxModule
    ],
    // ...
})

<dx-html-editor>
    <dxo-toolbar [items]="items"></dxo-toolbar>
</dx-html-editor>

@(Html.DevExtreme().HtmlEditor()
    .Toolbar(t => t 
        .Items(i => {
            i.Add().LocateInMenu(ToolbarItemLocateInMenuMode.Never)
                .Widget(w => w.CheckBox()
                    .Text("My Format")
                    .OnValueChanged("myFormat_valueChanged")
                );
        })
    )
)

<script>
    function myFormat_valueChanged(e) {
        // Implement your logic here
    }
</script>

See Also

• items