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.
Follow the steps below to add the HtmlEditor to a page.
- Reference or import Quill as shown in the code samples below.
- Set the output markup language (HTML or Markdown) in the valueType option.
- 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.
- 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:
- Inline, block, and embedded formats
- Adaptive toolbar
- Built-in formats' and modules' extension
- Custom formats and modules
- Mail-merge placeholders (for example, %username%)
- Drag-and-drop images
- Copy-paste rich content (unsupported formats are removed)
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.
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.