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

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 option.
  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 widget's value option. 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.
  • <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>

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.