React HtmlEditor - Formats
The following tables list available formats and their values grouped into five categories: inline (or text), block, embedded, image, and table formats.
Inline (or text) formats
Format Name | Accepted Values | Customization Type |
---|---|---|
"background" | Any value the background-color CSS property accepts. | Modify |
"bold" | true, false | Extend |
"color" | Any value the color CSS property accepts. | Modify |
"font" | Any value the font-family CSS property accepts. | Modify |
"italic" | true, false | Extend |
"link" | String or Object ({ href: String, text: String, target: Boolean }) |
Extend |
"size" | Any value the font-size CSS property accepts. | Modify |
"strike" | true, false | Extend |
"script" | "sub", "super", false | Extend |
"underline" | true, false | Extend |
Block formats
Format Name | Accepted Values | Customization Type |
---|---|---|
"blockquote" | true, false | Extend |
"header" | 1, 2, 3, 4, 5, 6, false | Extend |
"indent" | "+1", "-1", false | Modify |
"list" | "ordered", "bullet", false | Extend |
"align" | "left", "right", "center", "justify", false | Modify |
"code-block" | true, false | Extend |
Embedded formats
All the following formats are extendable:
Format Name | Value Types |
---|---|
"extendedImage" | String or Object ({ src: String, width: Number, height: Number, alt: String }) |
"variable" | Object ({ value: String, escapeChar: String | Array<String> }) |
"mention" | Object ({ marker: String, id: String | Number, value: String }) |
Image formats
Format Name | Supports Pasting into HtmlEditor | Supports Drag and Drop from File Explorer |
---|---|---|
*.png | Yes | Yes |
*.jpg | Yes | Yes |
*.gif | Yes | Yes |
*.webp | Yes | Yes |
*.bmp | Yes | Yes |
*.svg | No | Yes |
*.ico | Yes | No |
Table formats
The following formats apply only to the <table>
element and can be modified (not extendable):
Format Name | Value Types |
---|---|
"tableTextAlign" | Any value the text-align CSS property accepts. |
"tableWidth" | Any value the width CSS property accepts. |
"tableHeight" | Any value the height CSS property accepts. |
"tableBackgroundColor" | Any value the background-color CSS property accepts. |
"tableBorder" | Any value the border CSS property accepts. |
"tableBorderColor" | Any value the border-color CSS property accepts. |
"tableBorderWidth" | Any value the border-width CSS property accepts. |
"tableBorderStyle" | Any value the border-style CSS property accepts. |
The following formats apply only to the <th>
and <td>
elements and can be modified (not extendable):
Format Name | Value Types |
---|---|
"cellWidth" | Any value the width CSS property accepts. |
"cellHeight" | Any value the height CSS property accepts. |
"cellBackgroundColor" | Any value the background-color CSS property accepts. |
"cellBorder" | Any value the border CSS property accepts. |
"cellBorderColor" | Any value the border-color CSS property accepts. |
"cellBorderWidth" | Any value the border-width CSS property accepts. |
"cellBorderStyle" | Any value the border-style CSS property accepts. |
"cellVerticalAlign" | Any value the vertical-align CSS property accepts. |
"cellTextAlign" | Any value the text-align CSS property accepts. |
"cellPadding" | Any value the padding CSS property accepts. |
"cellPaddingLeft" | Any value the padding-left CSS property accepts. |
"cellPaddingRight" | Any value the padding-right CSS property accepts. |
"cellPaddingTop" | Any value the padding-top CSS property accepts. |
"cellPaddingBottom" | Any value the padding-bottom CSS property accepts. |
The formats are applied by toolbar items. Most formats have items attached to them out-of-the-box. Refer to Predefined Items for a full list of toolbar items and the formats they apply.
Format the Content Programmatically
The HtmlEditor provides the following API methods to format the content:
API Method | Description |
---|---|
format(formatName, formatValue) | Applies a format to the selected content. |
formatLine(index, length, formatName, formatValue) | Applies a single block format to all lines in the given range. |
formatLine(index, length, formats) | Applies several block formats to all lines in the given range. |
formatText(index, length, formatName, formatValue) | Applies a single text format to all characters in the given range. |
formatText(index, length, formats) | Applies several text formats to all characters in the given range. |
Refer to the full method descriptions for examples and detailed information.
Customize Built-In Formats and Modules
The extend operation is available for blots only. For attributors, use the modify operation.
The format tables include customization operations.
Modify
When modifying a format, you can change the markup tag associated with it and limit format values. Refer to the get(componentPath) description to see a code example.
Module modification is also possible but can cause the module to malfunction.
Extend
You can extend the HtmlEditor's formats and modules, and also the DevExtreme Quill's formats and modules. To get a format or module for further extension, pass "formats/[formatName]" or "modules/[moduleName]" to the get(componentPath) method.
In the following code, the strike
format is extended so that the strikethrough text is non-editable when the format is applied. The extended format is then registered.
jQuery
$(function() { $("#htmlEditorContainer").dxHtmlEditor({ // ... onInitialized: function(e) { const htmlEditor = e.component; const Strike = htmlEditor.get("formats/strike"); class NonEditableStrike extends Strike { // Overrides the method that creates a DOM node for the formatted text static create(value) { // Creates a DOM node using the parent's implementation const node = super.create(value); node.setAttribute('contenteditable', false); return node; } } // Replaces the built-in `strike` format htmlEditor.register({ "formats/strike": NonEditableStrike }); } }); });
Angular
<dx-html-editor (onInitialized)="onInitialized($event)"> </dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular"; // ... export class AppComponent { onInitialized (e) { const htmlEditor = e.component; const Strike = htmlEditor.get("formats/strike"); class NonEditableStrike extends Strike { // Overrides the method that creates a DOM node for the formatted text static create(value) { // Creates a DOM node using the parent's implementation const node = super.create(value); node.setAttribute('contenteditable', false); return node; } } // Replaces the built-in `strike` format htmlEditor.register({ "formats/strike": NonEditableStrike }); } } @NgModule({ imports: [ // ... DxHtmlEditorModule ], // ... })
Vue
<template> <DxHtmlEditor @initialized="onInitialized"/> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxHtmlEditor } from 'devextreme-vue/html-editor'; export default { components: { DxHtmlEditor }, methods: { onInitialized(e) { const htmlEditor = e.component; const Strike = htmlEditor.get('formats/strike'); class NonEditableStrike extends Strike { // Overrides the method that creates a DOM node for the formatted text static create(value) { // Creates a DOM node using the parent's implementation const node = super.create(value); node.setAttribute('contenteditable', false); return node; } } // Replaces the built-in `strike` format htmlEditor.register({ 'formats/strike': NonEditableStrike }); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { HtmlEditor } from 'devextreme-react/html-editor'; class App extends React.Component { onInitialized(e) { const htmlEditor = e.component; const Strike = htmlEditor.get('formats/strike'); class NonEditableStrike extends Strike { // Overrides the method that creates a DOM node for the formatted text static create(value) { // Creates a DOM node using the parent's implementation const node = super.create(value); node.setAttribute('contenteditable', false); return node; } } // Replaces the built-in `strike` format htmlEditor.register({ 'formats/strike': NonEditableStrike }); } render() { return ( <HtmlEditor onInitialized={this.onInitialized}/> ); } } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.