React HtmlEditor - Overview

HtmlEditor is a WYSIWYG editor that allows you to format textual and visual content and to output it in HTML or Markdown. HtmlEditor is built on top of and requires Quill.

NOTE
DevExtreme HtmlEditor is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please create a new ticket in the DevExpress Support Center.

View Demo

Follow the steps below to add the HtmlEditor to a page.

  1. Reference or import Quill as shown in the code samples below.
  2. Set the output markup language (HTML or Markdown) in the valueType property.
  3. If you choose Markdown as the output format, link the turndown and showdown scripts before the DevExtreme scripts. When you use JavaScript modules, import the Markdown converter instead.
  4. Optionally, specify the initial content in the UI component's value property. The content's language should correspond to the valueType. HTML content can also be declared directly inside the UI component's container, in which case the language (HTML) and the valueType can differ.
jQuery
JavaScript
HTML
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        valueType: "html" // or "markdown"
    })
})
<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.16/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.16/css/dx.light.css">
    <script type="text/javascript" src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
    <!-- Required if valueType is "markdown" -->
    <!-- <script type="text/javascript" src="https://unpkg.com/turndown/dist/turndown.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.7/showdown.min.js"></script> -->

    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.16/js/dx.all.js"></script>
</head>
<body>
    <div id="htmlEditorContainer">
        <p>
            DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
            textual and visual content and store it as HTML or Markdown.
        </p>
    </div>
</body>
Angular
HTML
TypeScript
<dx-html-editor
    valueType="html"> <!-- or "markdown" -->
    <p>
        DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
        textual and visual content and store it as HTML or Markdown.
    </p>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// Required if valueType is "markdown"
// import "devextreme/ui/html_editor/converters/markdown";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor 
        value-type="html"> <!-- or "markdown" -->
        <p>
            DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
            textual and visual content and store it as HTML or Markdown.
        </p>
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxHtmlEditor } from 'devextreme-vue/html-editor';
// Required if valueType is "markdown"
// import "devextreme/ui/html_editor/converters/markdown";
// ...

export default {
    components: {
        DxHtmlEditor
    }
}
</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';
// Required if valueType is "markdown"
// import "devextreme/ui/html_editor/converters/markdown";
// ...

class App extends React.Component {
    render() {
        return (
            <HtmlEditor 
                valueType="html"> {/* or "markdown" */}
                <p>
                    DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
                    textual and visual content and store it as HTML or Markdown.
                </p>
            </HtmlEditor>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
<script src="https://cdn3.devexpress.com/jslib/minor_21_1/js/dx-quill.min.js"></script>
// Required if valueType is "markdown"
// <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.7/showdown.min.js"></script>

// Reference the DevExtreme sources here

@(Html.DevExtreme().HtmlEditor()
    .ValueType(HtmlEditorValueType.Html) // or HtmlEditorValueType.Markdown
    .Content(@<text>
        <p>
            DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
            textual and visual content and store it as HTML or Markdown.
        </p>
    </text>)
)

The HtmlEditor supports the following features:

The HtmlEditor has the following limitations:

  • Users cannot edit the layout. The HtmlEditor is designed to format textual content only.
  • Users cannot save full HTML markup. The HtmlEditor supports only a subset (built-in or custom) of formats. Everything else is discarded.