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.
  • 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;

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.