React Rich Text Editor - A WYSIWYG Markdown Editor

Inline mode

The React Rich Text Editor shows an inline HTML editor when content within an editable area is clicked or selected.

• Inline HTML editor example

Mention and hashtag

While composing content in the React Rich Text Editor, users and groups can be tagged or chosen from a suggestion list.

Formatting text

• Apply formatting to selected content, entire paragraphs, or specific words and characters.
• Format headings, quotations, code blocks, paragraphs, and more.
• Use bold, italic, underline, or strikethrough, or change letter casing.
• Adjust paragraph indentation and spacing.
• Choose fonts and set appropriate font sizes.
• Apply subscript and superscript formatting.
• Customize the font color and background color for the content.

• Formatting text documentation

Auto-formatting for Markdown syntax

Autoformatting enables fast content styling using Markdown-style shortcuts, removing the need for toolbar buttons or dropdowns for common formatting. When users type syntax like # for headings, ** for bold, or * for italics, the editor automatically converts it into corresponding HTML elements.

• Auto formatting for Markdown syntax documentation

Checklists

Checklists (to-do lists) can be created directly within the editor. Users can easily add interactive checkbox items to manage and track tasks within their content.

• Checklist documentation

Adding custom lists

Create ordered (numbered) or unordered (bulleted) lists to organize content effectively. The editor supports various bullet styles such as circles and squares, along with multiple numbering formats like lowercase Greek and uppercase Roman.

Quick insert for table rows and columns

Users can quickly add rows and columns to tables. When hovering near table edges, a “+” icon appears, allowing insertion with a single click.

Line height

Users can control vertical spacing between lines of text, adjusting how compact or spacious the content appears in order to improve readability and visual layout.

Full screen text editor

A built-in option allows the editor to expand into full-screen mode, providing a distraction-free environment for content editing.

Paste from Microsoft Word and Excel

Includes built-in options to paste content with images from Microsoft Word, Outlook, and Excel while removing unwanted tags, attributes, and styles. You can choose to paste content as plain text, with cleaned formatting, or keep the original formatting.

Auto-hyperlink of URLs

The editor automatically converts plain text URLs into clickable hyperlinks as they are typed.

React form validations

The Rich Text Editor supports form integration and can retrieve values during form submission. It includes the following validation types:

• Required validation
• Maximum length validation

Limit content length

Users can define a character limit for specific sections, allowing control over the amount of content entered.

• Maximum character count limit documentation

Resizable editor

The React Rich Text Editor can be resized, enabling users to expand or reduce the content area as needed.

Insert an image through file manager

The built-in file manager allows users to insert and upload images directly from cloud storage or a server.

• Insert an image through file manager documentation

Format painter

The format painter enables users to copy formatting and apply it elsewhere, eliminating the need for manual adjustments. It is accessible from the toolbar or via keyboard shortcuts. The sticky mode, activated by double-clicking the toolbar button, allows users to apply formatting to multiple sections continuously.