DevExtreme React - 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 email your comments to support@devexpress.com.

View Demo

To add the HtmlEditor to your page, reference (import) Quill and use the valueType option to specify the desired output markup language - HTML or Markdown. The content is converted into this language and stored in the widget's value.

Optionally, specify the initial content in the widget's value. The content's language should correspond to the valueType. HTML content can also be declared directly inside the widget'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/19.1.16/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.1.16/css/dx.light.css">
    <script type="text/javascript" src="https://cdn.quilljs.com/1.3.6/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/19.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
    ],
    // ...
})
ASP.NET MVC Controls
Razor C#
@(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>)
)
<script src="https://cdn.quilljs.com/1.3.6/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>

The HtmlEditor supports a wide range of 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.