React Rich Text Editor - A WYSIWYG Markdown Editor

Inline mode

The React Rich Text Editor displays an inline HTML editor when the content in an editable area is clicked or selected.

• Inline HTML editor example

Mention and hashtag

When composing content in the React Rich Text Editor, users or groups can be tagged or selected from the suggestion list.

Formatting text

• Format the selected content, whole paragraphs, or specific words or characters.
• Format headings, quotations, code, paragraphs, etc.
• Bold, italicize, underline, strikethrough, or capitalize letters and words.
• Change paragraph indentation and spacing.
• Select fonts and font sizes.
• Use subscripts and superscripts.
• Select font color and the background color for the content.

• Formatting text documentation

Auto formatting for Markdown syntax

Autoformat enables quick content formatting using Markdown-like shortcodes. This eliminates the need for toolbar buttons or dropdowns for common formatting. As Markdown syntax such as # for headings, ** for bold, and * for italics are typed, the editor automatically converts it into HTML elements.

• Auto formatting for Markdown syntax documentation

Checklists

Checklists (to-do lists) can be created directly within the Rich Text Editor. Users can easily add interactive checkbox items to their content, enabling task tracking and management within documents.

• Checklist documentation

Adding custom lists

Create ordered (numbered) or unordered (bulleted) lists to organize the content in the React Rich Text Editor. It provides support to change the bullet appearance for the unordered lists to circles or squares. It also supports different numbering formats for ordered lists such as lowercase Greek or uppercase Roman.

Quick insert for table rows and columns

Users can insert rows and columns into a table quickly. When hovering the mouse near the table edges, a “+” icon appears, enabling users to add rows or columns with a single click.

Line height

Users can adjust vertical spacing between lines of text, giving them control over how tightly or loosely the text is packed within paragraphs. This helps improve readability and visual balance in the content layout.

Full screen text editor

Make the React Rich Text Editor full-screen size (full-page editor) for editing the content.

Paste from Microsoft Word and Excel

The React Rich Text Editor offers built-in options to paste content with images from Microsoft Word, Microsoft Outlook, and Microsoft Excel by filtering out tags, attributes, and styles. Additionally, choose whether the content should be pasted as plain text, with cleaned styles, or with source formatting styles.act Rich Text Editor seamlessly supports forms and obtain

Auto hyperlink of URL

The React Rich Text Editor is configured to turn text into a hyperlink automatically when a URL is typed as plain text.

React form validations

The RTE supports forms and obtains values on form submission actions. The two types of validation are:

• Required validation
• Maximum-length validation

Limit content length

Users can restrict the number of characters in a particular section.

• Maximum character count limit documentation

Resizable editor

The React Rich Text Editor can be resized, allowing users to widen or shrink the content area.

Insert an image through file manager

The integrated file manager in the editor inserts and uploads images from cloud storage or a server.

• Insert an image through file manager documentation

Format painter

Use the format painter to effortlessly copy formatting and apply it to your content, eliminating the need for manual reformatting and saving you valuable time. Access the format painter through the toolbar or convenient keyboard shortcuts for quick and easy application. Take advantage of the sticky mode by double-clicking the toolbar button, which allows you to apply formats to multiple locations seamlessly.