React HtmlEditor - Predefined Items

Toolbar items allow users to format the HTML Editor'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 HTML Editor Toolbar

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

Toolbar item name Format acceptedValues
"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> })
"font" "font" Any value the font-family CSS property accepts.
"size" "size" Any value the font-size CSS property accepts.
"undo" - -
"redo" - -
"clear" - -
"separator" - -
"cellProperties" - -
"tableProperties" - -
"insertTable" - -
"insertHeaderRow" - -
"insertRowAbove" - -
"insertRowBelow" - -
"insertColumnLeft" - -
"insertColumnRight" - -
"deleteColumn" - -
"deleteRow" - -
"deleteTable" - -

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

  • import React from 'react';
  • 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 name="bold"/>
  • <Item name="italic"/>
  • <Item name="alignRight"/>
  • <Item name="alignLeft"/>
  • </Toolbar>
  • </HtmlEditor>
  • );
  • }
  • }
  •  
  • export default App;

To add a select box, specify the name and acceptedValues:

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { HtmlEditor, Toolbar, Item } from 'devextreme-react/html-editor';
  •  
  • const headerAcceptedValues = [1, 2, 3, false];
  • const alignAcceptedValues = ['left', 'right', 'center'];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <HtmlEditor>
  • <Toolbar>
  • <Item
  • acceptedValues={headerAcceptedValues}
  • name="header"
  • />
  • <Item
  • acceptedValues={alignAcceptedValues}
  • name="align"
  • />
  • </Toolbar>
  • </HtmlEditor>
  • );
  • }
  • }
  •  
  • export default App;

Customize Predefined Items

To customize a button, assign its name to the name property and specify button properties in the options object:

  • import React from 'react';
  • 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}
  • name="clear"
  • />
  • </Toolbar>
  • </HtmlEditor>
  • );
  • }
  • }
  •  
  • export default App;

To customize a select box, specify select box properties in the options object in addition to the name and acceptedValues properties:

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { HtmlEditor, Toolbar, Item } from 'devextreme-react/html-editor';
  •  
  • const sizeFormatOptions = { width: 150 };
  • const sizeAcceptedValues = ["11px", "14px", "16px"];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <HtmlEditor>
  • <Toolbar>
  • <Item
  • options={sizeFormatOptions}
  • acceptedValues={sizeAcceptedValues}
  • name="size"
  • />
  • </Toolbar>
  • </HtmlEditor>
  • );
  • }
  • }
  •  
  • export default App;
See Also