DevExtreme jQuery/JS - Overview

The HtmlEditor is a WYSIWYG text editor designed to support HTML and Markdown output formats. This widget is based on Quill.

NOTE
The HtmlEditor is at the Community Technology Preview (CTP) development stage. This widget can be tested but its concept, design and behavior can change without notice.

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/18.2.18/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/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/18.2.18/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.