We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rich Text Editor for JavaScript

The JavaScript 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 like a toolbar and quick toolbar for editing text to make a WYSIWYG editor.


HTML editor

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.


Markdown editor

The rich text editor component can be used as a markdown editor. It allows the content to be in the markdown format. The typed markdown content can be previewed using a third-party plugin. It also supports custom markdown formatting characters.


JavaScript Rich Text Editor with Inline mode

Inline mode

Users can activate the editor on demand while editing the content.


Initialize elements

The component can be initialized from various elements such as <textarea> and <div>.

JavaScript Rich Text Editor with Initialize elements


Toolbar

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.

Multi row toolbar

The excess toolbar commands are wrapped into the next rows within toolbar.

Expand toolbar

The additional commands hidden in the next row of the toolbar become visible when it is expanded via the expand icon.

JavaScript Rich Text Editor with Quick toolbar

Quick toolbar

This toolbar contains frequently used commands related to the text, image, or links. It helps access and format these elements (text, image, links) quickly, and allows you to customize it.

JavaScript Rich Text Editor with Floating toolbar

Floating the toolbar

This toolbar doesn’t stick with the editor and is scrollable while scrolling the editor page.

JavaScript Rich Text Editor with Fully customizable toolbar

Fully customizable

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.

Custom tools

Users can also add their commands to the toolbar along with the built-in commands.


Editing experience

The component provides a wide range of tools and options to create a better editing experience with content.

Formatting text

You can apply formatting to the selected content, whole paragraphs, or specific words or characters:

  • Apply formatting to headings, quotations, code, 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.

Adding images in JavaScript Rich Text Editor

Adding images

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.

Adding links in JavaScript Rich Text Editor

Add or remove hyperlinks with customization options such as display text, tooltips, and setting whether the link can be opened in a new window.

JavaScript Rich Text Editor with Alignment text tool

Align text

Built-in settings are available to align your content on the left, center, or right, or justify it.

Adding lists

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

JavaScript Rich Text Editor with Insert table tool

Insert table

Create a table to display grid-like tabular data in HTML editor mode. Manipulate the table and its elements dynamically such as inserting or removing rows and columns; resizing a whole table, rows, or columns; and removing a table.


Full-screen editing

Make the editor full viewport size for editing content.

JavaScript Rich Text Editor with full-screen editing


Undo-redo manager

The undo-redo manager manages the undo action history to store users’ editing actions. You can customize the undo steps.

JavaScript Rich Text Editor with Undo-redo manager


Source code (HTML) view

Examine and edit the HTML code directly in source code and view the preview result.

JavaScript Rich Text Editor with Source code (HTML) view


Integrate with third-party libraries

Integrate additional third-party libraries like spell check, code mirror, etc., to improve the content.

Integrate with third-party libraries in JavaScript Rich Text Editor


Preview

Users can switch between editing content and its visual preview in Markdown Editor.


Print

Print the content of the editor with its styles.

JavaScript Rich Text Editor with Print


Auto linking of URL

Configured to turn text into a hyperlink automatically while a user types a URL as plain text.

JavaScript Rich Text Editor with Autolinking of URL


Clipboard operations

The editor typically allows users to use clipboard operations (cut, copy, and paste).

JavaScript Rich Text Editor with Clipboard operations


Selection

Select a particular range within the content and modify it.

JavaScript Rich Text Editor with Selection


Form support

The editor seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms.

  • Required validation

  • Maximum length validation


Limit content length

Users can restrict the content’s maximum length.


Touch-friendly and responsive

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.


Globalization

Localization

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.

RTL

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.


Accessibility

  • Fully supports WAI-ARIA accessibility, which 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.

Developer-friendly APIs

There are available, sufficient client-side APIs to optimize the process of editing content.


50+ JAVASCRIPT CONTROLS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon