DevExtreme jQuery - 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.
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
Feedback