Vue 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 name acceptedValue
"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:

  • <template>
  • <DxHtmlEditor>
  • <DxToolbar>
  • <DxItem name="bold"/>
  • <DxItem name="italic"/>
  • <DxItem name="alignRight"/>
  • <DxItem name="alignLeft"/>
  • </DxToolbar>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxHtmlEditor,
  • DxToolbar,
  • DxItem
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxToolbar,
  • DxItem
  • }
  • }
  • </script>

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

  • <template>
  • <DxHtmlEditor>
  • <DxToolbar>
  • <DxItem
  • :accepted-values="headerAcceptedValues"
  • name="header"
  • />
  • <DxItem
  • :accepted-values="alignAcceptedValues"
  • name="align"
  • />
  • </DxToolbar>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxHtmlEditor,
  • DxToolbar,
  • DxItem
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxToolbar,
  • DxItem
  • },
  • data() {
  • return {
  • headerAcceptedValues: [1, 2, 3, false],
  • alignAcceptedValues: ['left', 'right', 'center']
  • };
  • }
  • }
  • </script>

Customize Predefined Items

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

  • <template>
  • <DxHtmlEditor>
  • <DxToolbar>
  • <DxItem
  • :options="clearFormatOptions"
  • name="clear"
  • />
  • </DxToolbar>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • 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>

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

  • <template>
  • <DxHtmlEditor>
  • <DxToolbar>
  • <DxItem
  • :options="sizeFormatOptions"
  • :accepted-values="sizeAcceptedValues"
  • name="size"
  • />
  • </DxToolbar>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • 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 },
  • sizeAcceptedValues: ["11px", "14px", "16px"]
  • };
  • }
  • }
  • </script>
See Also