React HtmlEditor - Overview
HtmlEditor is a client-side WYSIWYG editor that allows users to format text and visual content, and to export it as HTML or Markdown. Supported features include:
- Inline Formats:
- Bold, italic,
strikethrough, and underscore text formatting attributes - Typeface, font size, and text color changes (HTML only)
- Bold, italic,
- Block Formats:
- Headers
- Lists (ordered and unordered)
- Code blocks
- Quotes
- Built-in Format Customization
- HTML and Markdown Support
- Mail Merge
- Adaptive Toolbar designed to work with images, links, and color formats.
- Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.
- Copy-paste rich content (the control automatically removes unsupported text formatting attributes).
- Mentions (@person, for example)
- Tables
How to Use HTMLEditor
HtmlEditor is designed to create rich text and export it in HTML or Markdown format. You can also use the component to parse HTML content (for example, if you set value to markup). However, this technique may prove ineffective because HtmlEditor does not support all HTML features. The following limitations apply:
If you use Shadow DOM, the HtmlEditor component may experience issues in some browsers (see getSelection).
HtmlEditor does not produce a fully-structured HTML document with
<!DOCTYPE>,<head>, and<body>tags. The editor is meant to export simple markup that contains formatted rich content for an article, forum post, etc.HtmlEditor saves only a limited subset of tags and attributes. All other formatting attributes and features are discarded.
HtmlEditor automatically removes redundant tags:
<!-- from --> <p><span>He</span><em><span>llo</span></em></p> <!-- to --> <p>He<em>llo</em></p>
HtmlEditor trims extra space and tab characters passed to the value option.
The component is not designed to convert text enclosed in curly brackets (
{}) to a variable. Content in curly brackets is always treated as plain text.The HtmlEditor tables are native HTML tables and use native features; therefore, the same limitations apply. For example, users cannot paste multiline text in separate cells.
The HtmlEditor tables do not support complex elements in cells, such as block elements, lists, nested tables, etc.
HtmlEditor does not support complex clipboard data formats of HTML pages and text processor applications, such as Microsoft Word®.
HtmlEditor does not support CSP. If you want to pass markup that contains inline styles to HtmlEditor value, use
style-src 'unsafe-inline';directive to avoid errors.
If you have technical questions, please create a support ticket in the DevExpress Support Center.