All docs
V20.2
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Predefined Items

Toolbar items allow users to format the HtmlEditor's content and perform actions on it.

Predefined toolbar items include:

  • Buttons that apply single-choice formats to the text.
  • Action buttons.
  • Select boxes that apply multiple-choice formats.
  • Separators that are not user-interactive and only divide other elements.

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

The following table lists toolbar items and the formats they apply (if applicable):

Toolbar Item formatName formatValue
"background" "background" Any value the background-color CSS property accepts.
"bold" "bold" true or false
"color" "color" Any value the color CSS property accepts.
"italic" "italic" true or false
"link" "link" String
or
Object ({ href: String, text: String, target: Boolean })
"image" "extendedImage" String
or
Object ({ src: String, width: Number, height: Number, alt: String })
"strike" "strike" true or false
"subscript" "script" "sub"
"superscript" "script" "super"
"underline" "underline" true or false
"blockquote" "blockquote" true or false
"header" "header" 1, 2, 3, 4, 5, or 6
"increaseIndent" "indent" "+1"
"decreaseIndent" "indent" "-1"
"orderedList" "list" "ordered"
"bulletList" "list" "bullet"
"alignLeft" "align" "left"
"alignCenter" "align" "center"
"alignRight" "align" "right"
"alignJustify" "align" "justify"
"codeBlock" "code-block" true or false
"variable" "variable" Object {{ value: String, escapeChar: String | Array<String> }}
"undo" - -
"redo" - -
"clear" - -
"separator" - -

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>
        <dxi-item formatName="bold"/>
        <dxi-item formatName="italic"/>
        <dxi-item formatName="alignRight"/>
        <dxi-item formatName="alignLeft"/>
    </dxo-toolbar>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor>
        <DxToolbar>
            <DxItem format-name="bold"/>
            <DxItem format-name="italic"/>
            <DxItem format-name="alignRight"/>
            <DxItem format-name="alignLeft"/>
        </DxToolbar>
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import {
    DxHtmlEditor,
    DxToolbar,
    DxItem
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxToolbar,
        DxItem
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor, Toolbar, Item } from 'devextreme-react/html-editor';

class App extends React.Component {
    render() {
        return (
            <HtmlEditor>
                <Toolbar>
                    <Item formatName="bold"/>
                    <Item formatName="italic"/>
                    <Item formatName="alignRight"/>
                    <Item formatName="alignLeft"/>
                </Toolbar>
            </HtmlEditor>
        );
    }
}

export default App;
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
HTML
TypeScript
<dx-html-editor>
    <dxo-toolbar>
        <dxi-item
            [formatValues]="headerFormatValues"
            formatName="header"
        />
        <dxi-item
            [formatValues]="alignFormatValues"
            formatName="align"
        />
    </dxo-toolbar>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    headerFormatValues =  [1, 2, 3, false];
    alignFormatValues = ["left", "right", "center"];
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor>
        <DxToolbar>
            <DxItem
                :format-values="headerFormatValues"
                format-name="header"
            />
            <DxItem
                :format-values="alignFormatValues"
                format-name="align"
            />
        </DxToolbar>
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import {
    DxHtmlEditor,
    DxToolbar,
    DxItem
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxToolbar,
        DxItem
    },
    data() {
        return {
            headerFormatValues: [1, 2, 3, false],
            alignFormatValues: ['left', 'right', 'center']
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor, Toolbar, Item } from 'devextreme-react/html-editor';

const headerFormatValues = [1, 2, 3, false];
const alignFormatValues = ['left', 'right', 'center'];

class App extends React.Component {
    render() {
        return (
            <HtmlEditor>
                <Toolbar>
                    <Item
                        formatValues={headerFormatValues}
                        formatName="header"
                    />
                    <Item
                        formatValues={alignFormatValues}
                        formatName="align"
                    />
                </Toolbar>
            </HtmlEditor>
        );
    }
}

export default App;
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 Predefined Items

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
HTML
TypeScript
<dx-html-editor>
    <dxo-toolbar>
        <dxi-item
            [options]="clearFormatOptions"
            formatName="clear"
        />
    </dxo-toolbar>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    clearFormatOptions = { icon: "clear", type: "danger" };
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor>
        <DxToolbar>
            <DxItem
                :options="clearFormatOptions"
                format-name="clear"
            />
        </DxToolbar>
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import {
    DxHtmlEditor,
    DxToolbar,
    DxItem
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxToolbar,
        DxItem
    },
    data() {
        return {
            clearFormatOptions: { icon: 'clear', type: 'danger' }
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor, Toolbar, Item } from 'devextreme-react/html-editor';

const clearFormatOptions = { icon: 'clear', type: 'danger' };

class App extends React.Component {
    render() {
        return (
            <HtmlEditor>
                <Toolbar>
                    <Item
                        options={clearFormatOptions}
                        formatName="clear"
                    />
                </Toolbar>
            </HtmlEditor>
        );
    }
}

export default App;
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
HTML
TypeScript
<dx-html-editor>
    <dxo-toolbar>
        <dxi-item
            [options]="sizeFormatOptions"
            [formatValues]="sizeFormatValues"
            formatName="size"
        />
    </dxo-toolbar>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    sizeFormatValues = ["11px", "14px", "16px"];
    sizeFormatOptions = { width: 150 };
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor>
        <DxToolbar>
            <DxItem
                :options="sizeFormatOptions"
                :format-values="sizeFormatValues"
                format-name="size"
            />
        </DxToolbar>
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import {
    DxHtmlEditor,
    DxToolbar,
    DxItem
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxToolbar,
        DxItem
    },
    data() {
        return {
            sizeFormatOptions: { width: 150 },
            sizeFormatValues: ["11px", "14px", "16px"]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor, Toolbar, Item } from 'devextreme-react/html-editor';

const sizeFormatOptions = { width: 150 };
const sizeFormatValues = ["11px", "14px", "16px"];

class App extends React.Component {
    render() {
        return (
            <HtmlEditor>
                <Toolbar>
                    <Item
                        options={sizeFormatOptions}
                        formatValues={sizeFormatValues}
                        formatName="size"
                    />
                </Toolbar>
            </HtmlEditor>
        );
    }
}

export default App;
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