JavaScript/jQuery HtmlEditor - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery application.

The HtmlEditor is a client-side WYSIWYG editor that allows its users to format textual and visual content and output it as HTML or Markdown. Supported features:

Note the following about the HtmlEditor functionality:

  • The HtmlEditor does not produce a fully structured HTML document with a <!DOCTYPE>, a <head>, and a <body>. Its purpose is to output markup that contains formatted rich content for an article, forum post, and so on.

  • The HtmlEditor saves only a subset of tags and attributes. Everything else is discarded.

This tutorial explains how to add an HtmlEditor to a page and configure its core features. The following control demonstrates the result:

Refer to the following sections for details on each configuration step. You can also find the full code in the following GitHub repository: Getting Started with HtmlEditor.

Create an HtmlEditor

jQuery

The HtmlEditor uses the DevExtreme Quill library. To create an HtmlEditor on your page, add DevExtreme to your application, reference the DevExtreme Quill script before the main DevExtreme script, and use the following code:

index.js
index.html
$(function () {
    $("#html-editor").dxHtmlEditor({
        // Configuration goes here
    });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.1.11/css/dx.light.css">
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn3.devexpress.com/jslib/21.1.11/js/dx-quill.min.js"></script>
        <script src="https://cdn3.devexpress.com/jslib/21.1.11/js/dx.all.js"></script>
        <script src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="html-editor">
            <!-- Initial markup goes here -->
        </div>
    </body>
</html>
Angular

The HtmlEditor uses the DevExtreme Quill library. This library is installed automatically when you add DevExtreme to your application. To create an HtmlEditor on your page, use the following code:

app.component.html
app.component.ts
app.module.ts
<dx-html-editor>
    <!-- Configuration goes here -->
</dx-html-editor>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxHtmlEditorModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

The HtmlEditor uses the DevExtreme Quill library. This library is installed automatically when you add DevExtreme to your application. To create an HtmlEditor on your page, use the following code:

App.vue
<template>
    <DxHtmlEditor>
        <!-- Configuration goes here -->
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxHtmlEditor } from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor
    }
}
</script>
React

The HtmlEditor uses the DevExtreme Quill library. This library is installed automatically when you add DevExtreme to your application. To create an HtmlEditor on your page, and use the following code:

App.js
import React from 'react';
import './App.css';
import 'devextreme/dist/css/dx.light.css';
import { HtmlEditor } from 'devextreme-react/html-editor';

const App = () => {
    return (
        <HtmlEditor>
            {/* Configuration goes here */}
        </HtmlEditor>
    );
}

export default App;

Set the Output Markup Language

The HtmlEditor can output markup in HTML or Markdown. Use the valueType property to define the language. If you use Markdown, add the turndown and devextreme-showdown libraries to your project. In this tutorial, HTML is used as the output language.

The control stores the document markup in the value property. If you use this property to specify the document's initial content, the language should match valueType. You can also declare HTML content inside the HtmlEditor element. In this case, the language (HTML) and valueType can differ.

jQuery
index.js
index.html
index.css
$(function () {
    $("#html-editor").dxHtmlEditor({
        valueType: "html" 
    });
});
<html>
    <head>
        <!-- ... -->
    </head>
    <body class="dx-viewport">
        <div id="html-editor">
            <h2>
                <img src="HtmlEditor.svg" alt="HtmlEditor">
                Rich Text Editor (HTML Editor)
            </h2>
            <br>
            <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML or Markdown.</p>
            <p>Supported features:</p>
            <ul>
                <li>Inline formats:
                    <ul>
                        <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
                        <li>Typeface, font size, text color changes (HTML only)</li>
                    </ul>
                </li>
                <li>Block formats:
                    <ul>
                        <li>Headers</li>
                        <li>Lists (ordered and unordered)</li>
                        <li>Code blocks</li>
                        <li>Quotes</li>
                    </ul>
                </li>
                <li>Built-in format customization</li>
                <li>HTML and Markdown support</li>
                <li>Mail Merge</li>
                <li>Adaptive toolbar for working with images, links, and color formats</li>
                <li>Copy-paste rich content (the control strips unsupported formats)</li>
                <li>Embedded images specified as a link to an image file or as base64-encoded binary data</li>
                <li>Mention (for example, @person)</li>
                <li>Tables</li>
            </ul>
            <br>
            <p>The editor supports the following frameworks and libraries:</p>
            <table>
                <tr>
                    <td><strong>jQuery</strong></td>
                    <td>v2.1 - v2.2 and v3.x</td>
                </tr>
                <tr>
                    <td><strong>Angular</strong></td>
                    <td>v7.0.x - v11.0.x</td>
                </tr>
                <tr>
                    <td><strong>React</strong></td>
                    <td>v16.2+</td>
                </tr>
                <tr>
                    <td><strong>Vue</strong></td>
                    <td>v2.6.3+</td>
                </tr>
            </table>
        </div>
    </body>
</html>
.dx-htmleditor-content img {
    vertical-align: middle;
}

.dx-htmleditor-content table {
    width: 50%;
}

.dx-htmleditor-content table td:last-child {
    text-align: right;
}
Angular
app.component.html
app.component.css
<dx-html-editor valueType="html">
    <h2>
        <img src="assets/images/HtmlEditor.svg" alt="HtmlEditor">
        Rich Text Editor (HTML Editor)
    </h2>
    <br>
    <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG editor that allows its users to format textual and visual content and output it as HTML or Markdown.</p>
    <p>Supported features:</p>
    <ul>
        <li>Inline formats:
            <ul>
                <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
                <li>Typeface, font size, text color changes (HTML only)</li>
            </ul>
        </li>
        <li>Block formats:
            <ul>
                <li>Headers</li>
                <li>Lists (ordered and unordered)</li>
                <li>Code blocks</li>
                <li>Quotes</li>
            </ul>
        </li>
        <li>Built-in format customization</li>
        <li>HTML and Markdown support</li>
        <li>Mail Merge</li>
        <li>Adaptive toolbar for working with images, links, and color formats</li>
        <li>Copy-paste rich content (the control strips unsupported formats)</li>
        <li>Embedded images specified as a link to an image file or as base64-encoded binary data</li>
        <li>Mention (for example, @person)</li>
        <li>Tables</li>
    </ul>
    <br>
    <p>The editor supports the following frameworks and libraries:</p>
    <table>
        <tr>
            <td><strong>jQuery</strong></td>
            <td>v2.1 - v2.2 and v3.x</td>
        </tr>
        <tr>
            <td><strong>Angular</strong></td>
            <td>v7.0.x - v11.0.x</td>
        </tr>
        <tr>
            <td><strong>React</strong></td>
            <td>v16.2+</td>
        </tr>
        <tr>
            <td><strong>Vue</strong></td>
            <td>v2.6.3+</td>
        </tr>
    </table>
</dx-html-editor>
::ng-deep .dx-htmleditor-content img {
    vertical-align: middle;
}

::ng-deep .dx-htmleditor-content table {
    width: 50%;
}

::ng-deep .dx-htmleditor-content table td:last-child {
    text-align: right;
}
Vue
App.vue
<template>
    <DxHtmlEditor value-type="html">
        <div>
            <h2>
                <img src="./HtmlEditor.svg" alt="HtmlEditor">
                Rich Text Editor (HTML Editor)
            </h2>
            <br>
            <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML or Markdown.</p>
            <p>Supported features:</p>
            <ul>
                <li>Inline formats:
                    <ul>
                        <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
                        <li>Typeface, font size, text color changes (HTML only)</li>
                    </ul>
                </li>
                <li>Block formats:
                    <ul>
                        <li>Headers</li>
                        <li>Lists (ordered and unordered)</li>
                        <li>Code blocks</li>
                        <li>Quotes</li>
                    </ul>
                </li>
                <li>Built-in format customization</li>
                <li>HTML and Markdown support</li>
                <li>Mail Merge</li>
                <li>Adaptive toolbar for working with images, links, and color formats</li>
                <li>Copy-paste rich content (the control strips unsupported formats)</li>
                <li>Embedded images specified as a link to an image file or as base64-encoded binary data</li>
                <li>Mention (for example, @person)</li>
                <li>Tables</li>
            </ul>
            <br>
            <p>The editor supports the following frameworks and libraries:</p>
            <table>
                <tr>
                    <td><strong>jQuery</strong></td>
                    <td>v2.1 - v2.2 and v3.x</td>
                </tr>
                <tr>
                    <td><strong>Angular</strong></td>
                    <td>v7.0.x - v11.0.x</td>
                </tr>
                <tr>
                    <td><strong>React</strong></td>
                    <td>v16.2+</td>
                </tr>
                <tr>
                    <td><strong>Vue</strong></td>
                    <td>v2.6.3+</td>
                </tr>
            </table>
        </div>
    </DxHtmlEditor>
<template>

<script>
    // ...
</script>

<style>
.dx-htmleditor-content img {
    vertical-align: middle;
}

.dx-htmleditor-content table {
    width: 50%;
}

.dx-htmleditor-content table td:last-child {
    text-align: right;
}
</style>
React
App.js
App.css
// ...
const markup = `
    <div>
        <h2>
            <img src="HtmlEditor.svg" alt="HtmlEditor"/>
            Rich Text Editor (HTML Editor)
        </h2>
        <br>
        <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML or Markdown.</p>
        <p>Supported features:</p>
        <ul>
            <li>Inline formats:
                <ul>
                    <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
                    <li>Typeface, font size, text color changes (HTML only)</li>
                </ul>
            </li>
            <li>Block formats:
                <ul>
                    <li>Headers</li>
                    <li>Lists (ordered and unordered)</li>
                    <li>Code blocks</li>
                    <li>Quotes</li>
                </ul>
            </li>
            <li>Built-in format customization</li>
            <li>HTML and Markdown support</li>
            <li>Mail Merge</li>
            <li>Adaptive toolbar for working with images, links, and color formats</li>
            <li>Copy-paste rich content (the control strips unsupported formats)</li>
            <li>Embedded images specified as a link to an image file or as base64-encoded binary data</li>
            <li>Mention (for example, @person)</li>
            <li>Tables</li>
        </ul>
        <br>
        <p>The editor supports the following frameworks and libraries:</p>
        <table>
            <tr>
                <td><strong>jQuery</strong></td>
                <td>v2.1 - v2.2 and v3.x</td>
            </tr>
            <tr>
                <td><strong>Angular</strong></td>
                <td>v7.0.x - v11.0.x</td>
            </tr>
            <tr>
                <td><strong>React</strong></td>
                <td>v16.2+</td>
            </tr>
            <tr>
                <td><strong>Vue</strong></td>
                <td>v2.6.3+</td>
            </tr>
        </table>
    </div>
`;

const App = () => {
    return (
        <HtmlEditor defaultValue={markup} valueType="html">
        </HtmlEditor>
    );
};

export default App;
.dx-htmleditor-content img {
    vertical-align: middle;
}

.dx-htmleditor-content table {
    width: 50%;
}

.dx-htmleditor-content table td:last-child {
    text-align: right;
}

Configure the Toolbar

The HtmlEditor's toolbar contains buttons and drop-down menus that allow users to edit and format content. To configure the toolbar, specify an array of items in the toolbar object. You can use predefined items or create custom items. You can specify a list of accepted values for certain predefined items, such as font size. To do so, use the name property to define the item and the acceptedValues property to assign an array of available values.

If toolbar items overflow the length of the toolbar, enable the multiline property to arrange the items in multiple lines.

jQuery
index.js
$(function () {
    $("#html-editor").dxHtmlEditor({
        // ...
        toolbar: {
            items: [
                "undo",
                "redo",
                "separator",
                {
                    name: "size",
                    acceptedValues: [ "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" ]
                },
                {
                    name: "font",
                    acceptedValues: [ "Arial", "Georgia", "Tahoma", "Times New Roman", "Verdana" ]
                },
                "separator",
                "bold",
                "italic",
                "strike",
                "underline",
                "separator",
                "alignLeft",
                "alignCenter",
                "alignRight",
                "alignJustify",
                "separator",
                "orderedList",
                "bulletList",
                "separator",
                {
                    name: "header",
                    acceptedValues: [false, 1, 2, 3, 4, 5]
                },
                "separator",
                "color",
                "background",
                "separator",
                "link",
                "image",
                "separator",
                "clear",
                "codeBlock",
                "blockquote",
                "separator",
            ],
            multiline: true
        },
    });
});
Angular
app.component.html
<dx-html-editor ... >
    <dxo-toolbar [multiline]="true">
        <dxi-item name="undo"></dxi-item>
        <dxi-item name="redo"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="size" [acceptedValues]="['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']"></dxi-item>
        <dxi-item name="font" [acceptedValues]="['Arial', 'Georgia', 'Tahoma', 'Times New Roman', 'Verdana']"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="bold"></dxi-item>
        <dxi-item name="italic"></dxi-item>
        <dxi-item name="strike"></dxi-item>
        <dxi-item name="underline"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="alignLeft"></dxi-item>
        <dxi-item name="alignCenter"></dxi-item>
        <dxi-item name="alignRight"></dxi-item>
        <dxi-item name="alignJustify"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="orderedList"></dxi-item>
        <dxi-item name="bulletList"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="header" [acceptedValues]="[false, 1, 2, 3, 4, 5]"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="color"></dxi-item>
        <dxi-item name="background"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="link"></dxi-item>
        <dxi-item name="image"></dxi-item>
        <dxi-item name="separator"></dxi-item>
        <dxi-item name="clear"></dxi-item>
        <dxi-item name="codeBlock"></dxi-item>
        <dxi-item name="blockquote"></dxi-item>
        <dxi-item name="separator"></dxi-item>
    </dxo-toolbar>
</dx-html-editor>
Vue
App.vue
<template>
    <DxHtmlEditor... >
        <DxToolbar :multiline="true">
            <DxItem name="undo" />
            <DxItem name="redo" />
            <DxItem name="separator" />
            <DxItem
                name="size"
                :accepted-values="sizeValues"
            />
            <DxItem
                name="font"
                :accepted-values="fontValues"
            />
            <DxItem name="separator" />
            <DxItem name="bold" />
            <DxItem name="italic" />
            <DxItem name="strike" />
            <DxItem name="underline" />
            <DxItem name="separator" />
            <DxItem name="alignLeft" />
            <DxItem name="alignCenter" />
            <DxItem name="alignRight" />
            <DxItem name="alignJustify" />
            <DxItem name="separator" />
            <DxItem name="orderedList" />
            <DxItem name="bulletList" />
            <DxItem name="separator" />
            <DxItem
                name="header"
                :accepted-values="headerValues"
            />
            <DxItem name="separator" />
            <DxItem name="color" />
            <DxItem name="background" />
            <DxItem name="separator" />
            <DxItem name="link" />
            <DxItem name="image" />
            <DxItem name="separator" />
            <DxItem name="clear" />
            <DxItem name="codeBlock" />
            <DxItem name="blockquote" />
            <DxItem name="separator" />
        </DxToolbar>
    </DxHtmlEditor>
</template>

<script>
import {
    // ...
    DxToolbar,
    DxItem,
} from 'devextreme-vue/html-editor';

export default {
    components: {
        // ...
        DxToolbar,
        DxItem,
    },
    data() {
        return {
            sizeValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'],
            fontValues: ['Arial', 'Georgia', 'Tahoma', 'Times New Roman', 'Verdana'],
            headerValues: [false, 1, 2, 3, 4, 5]
        };
    }
};
</script>
React
App.js
// ...
import {
    // ...
    Toolbar,
    Item,
} from "devextreme-react/html-editor";

// ...

const sizeValues = [ "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" ];
const fontValues = [ "Arial", "Georgia", "Tahoma", "Times New Roman", "Verdana" ];
const headerValues = [ false, 1, 2, 3, 4, 5 ];

const App = () => {
    return (
        <HtmlEditor ... >
            <Toolbar multiline={true}>
                <Item name="undo" />
                <Item name="redo" />
                <Item name="separator" />
                <Item name="size" acceptedValues={sizeValues} />
                <Item name="font" acceptedValues={fontValues} />
                <Item name="separator" />
                <Item name="bold" />
                <Item name="italic" />
                <Item name="strike" />
                <Item name="underline" />
                <Item name="separator" />
                <Item name="alignLeft" />
                <Item name="alignCenter" />
                <Item name="alignRight" />
                <Item name="alignJustify" />
                <Item name="separator" />
                <Item name="orderedList" />
                <Item name="bulletList" />
                <Item name="separator" />
                <Item name="header" acceptedValues={headerValues} />
                <Item name="separator" />
                <Item name="color" />
                <Item name="background" />
                <Item name="separator" />
                <Item name="link" />
                <Item name="image" />
                <Item name="separator" />
                <Item name="clear" />
                <Item name="codeBlock" />
                <Item name="blockquote" />
                <Item name="separator" />
            </Toolbar>
        </HtmlEditor>
    );
};

export default App;

Work with Tables

Users can insert and modify tables if you add the following items to the toolbar:

jQuery
index.js
$(function () {
    $("#html-editor").dxHtmlEditor({
        // ...
        toolbar: {
            items: [
                // ...
                "insertTable",
                "deleteTable",
                "insertRowAbove",
                "insertRowBelow",
                "deleteRow",
                "insertColumnLeft",
                "insertColumnRight",
                "deleteColumn"
            ]
        }
    });
});
Angular
app.component.html
<dx-html-editor ... >
    <dxo-toolbar ... >
        <!-- ... -->
        <dxi-item name="insertTable"></dxi-item>
        <dxi-item name="deleteTable"></dxi-item>
        <dxi-item name="insertRowAbove"></dxi-item>
        <dxi-item name="insertRowBelow"></dxi-item>
        <dxi-item name="deleteRow"></dxi-item>
        <dxi-item name="insertColumnLeft"></dxi-item>
        <dxi-item name="insertColumnRight"></dxi-item>
        <dxi-item name="deleteColumn"></dxi-item>
    </dxo-toolbar>
</dx-html-editor>
Vue
App.vue
<template>
    <DxHtmlEditor ... >
        <DxToolbar ... >
            <!-- ... -->
            <DxItem name="insertTable" />
            <DxItem name="deleteTable" />
            <DxItem name="insertRowAbove" />
            <DxItem name="insertRowBelow" />
            <DxItem name="deleteRow" />
            <DxItem name="insertColumnLeft" />
            <DxItem name="insertColumnRight" />
            <DxItem name="deleteColumn" />
        </DxToolbar>
    </DxHtmlEditor>
</template>
React
App.js
// ...

const App = () => {
    return (
        <HtmlEditor ... >
            <Toolbar ... >
                {/* ... */}
                <Item name="insertTable" />
                <Item name="deleteTable" />
                <Item name="insertRowAbove" />
                <Item name="insertRowBelow" />
                <Item name="deleteRow" />
                <Item name="insertColumnLeft" />
                <Item name="insertColumnRight" />
                <Item name="deleteColumn" />
            </Toolbar>
        </HtmlEditor>
    );
}

export default App;

Configure Mentions

Mentions allow users to reference others within text or conversation threads. This functionality is not used in this tutorial. For information about it, refer to the following demo: Mentions.

Resize Images

Users can resize images embedded within the content. To enable this functionality, set the mediaResizing.enabled property to true:

jQuery
index.js
$(function () {
    $("#html-editor").dxHtmlEditor({
        // ...
        mediaResizing: {
            enabled: true
        }
    });
});
Angular
app.component.html
<dx-html-editor ... >
    <!-- ... -->
    <dxo-media-resizing
        [enabled]="true">
    </dxo-media-resizing>
</dx-html-editor>
Vue
App.vue
<template>
    <DxHtmlEditor ... >
        <!-- ... -->
        <DxMediaResizing :enabled="true" />
    </DxHtmlEditor>
</template>
<script>
import {
    // ...
    DxMediaResizing
} from 'devextreme-vue/html-editor';

export default {
    components: {
        // ...
        DxMediaResizing
    },
    // ...
};
</script>
React
App.js
// ...
import {
    // ...
    MediaResizing
} from "devextreme-react/html-editor";

const App = () => {
    return (
        <HtmlEditor ... >
            {/* ... */}
            <MediaResizing enabled={true} />
        </HtmlEditor>
    );
}

export default App;

For further information on the HtmlEditor component, refer to the following resources: