React HtmlEditor - 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 property and specify button properties 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">
        </dxi-item>
    </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 properties in the options object in addition to the formatName and formatValues properties:

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