React HtmlEditor - toolbar

Configures the widget's toolbar.

Default Value: null

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

See Also

container

Specifies the container in which to place the toolbar.

Type:

String

|

DOM Node

|

jQuery

When this option is not set, the toolbar is placed in the widget's container.

See Also

items

Configures toolbar controls. These controls allow users to format text and execute commands.

Type:

Object

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:

The following built-in controls are available:

Formatting Controls Action and Other Controls
  • "background"
  • "bold"
  • "color"
  • "italic"
  • "link"
  • "image"
  • "strike"
  • "subscript"
  • "superscript"
  • "underline"
  • "blockquote"
  • "header"
  • "increaseIndent"
  • "decreaseIndent"
  • "orderedList"
  • "bulletList"
  • "alignLeft"
  • "alignCenter"
  • "alignRight"
  • "alignJustify"
  • "codeBlock"
  • "variable"
  • "separator"
  • "undo"
  • "redo"
  • "clear"

These controls are buttons. To customize a button, assign its name to the formatName option and specify the button options in the options object:

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.

View Demo