The Vue rich text editor (RTE) is an HTML and markdown editor that is useful for creating and editing content with formatting. It returns edited content in valid HTML markup or markdown (MD) format. The RTE provides a wide range of tools from toolbar, quick toolbar, etc., for editing text to make a WYSIWYG editor.
You can use the rich text editor component as an HTML editor. The HTML editor allows users to view and edit content as HTML markup (WYSIWYG). The user can view the HTML source by using
Code View icon.
The rich text editor component can be used as an HTML editor. The HTML editor allows users to view and edit content as HTML markup (WYSIWYG). To view the HTML source, use the
Code View icon.
Users can activate the editor on demand while editing the content.
The component can be initialized from various elements such as
The toolbar provides a variety of commands for editing and formatting content. You can format text, paragraphs, and characters; and add images, links, and lists. The commands are grouped together based on related functionality.
The excess toolbar commands are wrapped into the next rows within toolbar.
The additional commands hidden in the next row become visible when the toolbar is expanded via the expand icon.
This toolbar contains frequently used commands related to the text, image, or links. It helps to access and format these elements (text, image, links) quickly, and allows you to customize it.
This toolbar doesn’t stick with the editor and is scrollable while scrolling the editor page.
The toolbar of the rich text editor component is fully customizable with its buttons: add, remove, order, and group commands. This helps you design the toolbar as needed.
Users can also add their own commands to the toolbar along with the built-in commands.
The component provides a wide range of tools and options to create a better editing experience with content.
You can apply formatting to the selected content, whole paragraphs, or specific words or characters:
Apply formatting to headings, quotations, code, and paragraphs.
Bold, italicize, underline, strikethrough, or capitalize letters and words.
Change paragraph indentation and spacing.
Select a font and its size value.
Use subscripts and superscripts.
Select the font color and background color of content.
You can add images to your content from a local path or server path with image captions and then link URLs to the images. Additionally, shrink images if they are too large.
Add or remove hyperlinks with customization options such as display text, tooltips, and setting whether the link can be open in new window.
Built-in settings are available to align your content on the left, center, or right, or justify it.
Add ordered (numbered) or unordered (bulleted) lists to organize content.
Create tables to display grid-like tabular data in HTML editor mode. Manipulate the table and its elements dynamically by inserting and removing rows and columns; resizing whole tables, rows, or columns; or removing a table.
Make the editor full viewport size for editing content.
The undo-redo manager manages the undo action history to store users’ editing actions. You can customize the undo steps.
Examine and edit the HTML code directly in the source code and view the preview result.
Integrate additional third-party libraries like spell check, code mirror, etc., to improve the content.
Users can switch between editing content and its visual preview in Markdown Editor.
Print the content of the editor with its styles.
Configured to turn text into a hyperlink automatically while a user types a URL as plain text.
The editor typically allows users to use clipboard operations (cut, copy, and paste).
Select a particular range within the content and modify it.
The editor seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms.
Maximum length validation
Users can restrict the content’s maximum length.
The editor recognizes touch gestures, allowing the user to swipe left or right to change the value of the slider. The responsive, touch-friendly design provides the best user experience on all phone, tablet, and desktop form factors.
You can customize all static text used in the rich text editor (RTE) component through the localization library. For more information, refer to the documentation.
The rich text editor supports right-to-left rendering, allowing the text direction and layout of the editor to be displayed from right to left. This improves the user experience and accessibility for RTL languages.
Fully supports WAI-ARIA accessibility that helps the editor be accessed by on-screen readers and assistive devices.
The UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on the WCAG 2.0 standards.
Follows WAI-ARIA best practices for implementing keyboard interaction.
There are available, sufficient client-side APIs to optimize the process of editing content.