DevExtreme Vue - Formats

The following tables list available formats and their values grouped into three categories: inline (or text), block, and embedded formats.

Inline (or text) formats

Format Name	Accepted Values
background	Any value the background-color CSS property accepts.
bold	true, false
color	Any value the color CSS property accepts.
font	Any value the font-family CSS property accepts.
italic	true, false
link	String or Object ({ href: String, text: String, target: Boolean })
size	Any value the font-size CSS property accepts.
strike	true, false
script	"sub", "super", false
underline	true, false

Block formats

Format Name	Accepted Values
blockquote	true, false
header	1, 2, 3, 4, 5, 6, false
indent	"+1", "-1", false
list	"ordered", "bullet", false
align	"left", "right", "center", "justify", false
code-block	true, false

Embedded formats

Format Name	Value Types
extendedImage	String or Object ({ src: String, width: Number, height: Number, alt: String })
variable	Object {{ value: String, escapeChar: String \| Array<String> }}

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

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 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 stricken out text is non-editable when the format is applied. The extended format is then registered.

jQuery

JavaScript

$(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

HTML

TypeScript

<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.common.css';
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.common.css';
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;