Vue Rich Text Editor Component - A WYSIWYG Markdown Editor

Inline mode

The Vue 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 Vue Rich Text Editor, users or groups can be tagged or selected from the suggestion list.

• Mention integration

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

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.

Adding lists

Create ordered (numbered) or unordered (bulleted) lists to organize content.

Custom lists

Change the bullet appearance for unordered lists to circles or squares. Use numbering formats for ordered lists such as lowercase Greek or uppercase Roman numerals.

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 editor full-screen size (a full-page editor) for editing content.

Paste from Microsoft Word and Excel

The Vue 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.

• Paste from Microsoft Word example

Auto hyperlinking of URL

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

Vue form validations

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

• Required validation
• Maximum-length validation

• Form validation documentation

Limit content length

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

• Maximum character count limit documentation

Resizable editor

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

Insert an image through a file manager

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

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.