DevExtreme Angular - Built-In Controls

Controls on the toolbar manage the content. Built-in controls include buttons and select boxes.

Buttons apply single-choice formats to the text or perform actions on it. Select boxes apply multiple-choice formats.

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

To add a button to the toolbar, add its name to the items array:

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [ "bold", "italic", "alignRight", "alignLeft" ]
        }
    })
})
Angular
HTML
TypeScript
<dx-html-editor>
    <dxo-toolbar [items]="[ 'bold', 'italic', 'alignRight', 'alignLeft' ]"></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()
    .ID("htmlEditor")
    .Toolbar(t => t
        .Items(i => {
            i.Add().FormatName("bold");
            i.Add().FormatName("italic");
            i.Add().FormatName("alignRight");
            i.Add().FormatName("alignLeft");
        })
    )
)

To add a select box, specify the formatName and formatValues:

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [{
                formatName: "header",
                formatValues: [1, 2, 3, false]
            }, {
                formatName: "align",
                formatValues: ["left", "right", "center"]
            }]
        }
    })
})
Angular
TypeScript
HTML
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    items = [{
        formatName: "header",
        formatValues: [1, 2, 3, false]
    }, {
        formatName: "align",
        formatValues: ["left", "right", "center"]
    }]
}
@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("header")
                .FormatValues(new JS ("[1, 2, 3, false]"));
            i.Add().FormatName("align")
                .FormatValues(new[] { "left", "right", "center" })
        })
    )
)

Customize Built-In Controls

To customize a button, assign its name to the formatName option and specify 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 customize a select box, specify select box options in the options object in addition to the formatName and formatValues options:

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [{
                formatName: "size",
                formatValues: ["11px", "14px", "16px"],
                options: {
                    width: 150
                }
            }, // ...
            ]
        }
    })
})
Angular
TypeScript
HTML
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    items: any = [{
        formatName: "size",
        formatValues: ["11px", "14px", "16px"],
        options: {
            width: 150
        }
    }, // ...
    ];
}
@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("size")
                .FormatValues(new[] { "11px", "14px", "16px" })
                .Widget(w => w.SelectBox()
                    .Width(150)
                );
        })
    )
)
See Also