JavaScript/jQuery HtmlEditor - toolbar
Type:
Default Value: null
items[]
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 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 | |
|
|
|
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.
Feedback