Edit WYSIWYG HTML with rich tools for web and mobile apps.
Integrate into blogs, messages, email composers, and forums.
Use as an inline editor for in-place editing of any editable element.
Utilize a cutting-edge UI and toolbar customization.

4.5 / 5

(700+ Reviews)

Trusted by the world’s leading companies

Overview

The JavaScript Rich Text Editor is a feature-rich content-editing component designed for creating blogs, forum posts, notes, support tickets, comment sections, messaging apps, and more. It provides an intuitive interface for seamless content creation with full mobile support. The editor includes a powerful set of tools for formatting and managing rich content, generating clean HTML or Markdown output. With its modular architecture, users can easily add and manage images, links, tables, and lists, supporting flexible and scalable content editing.

Why choose the Syncfusion JavaScript Rich Text Editor?

WYSIWYG editor

Create and edit content visually with support for both HTML and Markdown modes, including iframe based editing.

Easy interaction

You can easily format the text and paragraphs by setting the editor’s foreground and background colors; adding ordered and unordered custom lists; and specifying the font, italicization, underlining, strikethrough, and bolding.

Flexible editing

For a better editing experience, the JavaScript Rich Text Editor control offers a variety of tools and choices. You can quickly insert images, videos, hyperlinks, and tables; merge table cells; and configure keys.

Preview the HTML code

Examine and edit the HTML code directly in the source code and view the preview result (HTML live editor).

AI-Assisted Development

Build advanced content editing experiences faster with the Agentic UI Builder and Syncfusion Agent Skills. Generate formatting tools, editor layouts, templates, and media-rich workflows with minimal manual effort.

Adapts to any resolution

The Rich Text Editor features a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It functions seamlessly across desktops, tablets, and smartphones, including devices powered by iOS, Android, and Windows.

Integrate with third-party libraries

It’s easy to integrate third-party libraries, like a spell checker or code mirror, with the Rich Text Editor to improve the content.

Globalization and localization

Enable users from different locales to use the Rich Text Editor by formatting dates, currency, and numbering to suit preferences.

AI-assisted development

Build feature-rich JavaScript Rich Text Editor experiences faster

Accelerate content editor development with Syncfusion AI tools that turn requirements into fully configured editing experiences with minimal manual setup.

Agent Skills

Accelerate development with Syncfusion AI Agent Skills for faster implementation and integration.

Example Prompt Generate a JavaScript rich text editor with Markdown support and custom toolbar actions.

Explore Agent Skills

AI Coding Assistant

Accelerate development with AI that generates, configures, and troubleshoots component code directly in your IDE.

Example Prompt Show how to enable autosave and image uploading in the Syncfusion JavaScript Rich Text Editor.

Explore AI Coding Assistant

AI-ready Rich Text Editor

Transform your JavaScript applications with our AI-ready Rich Text Editor, featuring grammar correction, multilingual support, rephrasing, and summarization.

See how AI improves your writing

AI-powered JavaScript Rich Text Editor component.

JavaScript Rich Text Editor code example

Easily get started with the JavaScript Rich Text Editor using a few simple lines of HTML and TypeScript code, as demonstrated below. Also explore this JavaScript Rich Text Editor example, which shows how to render and configure the control.

HTML
TS
<div class="control-section">
    <div id="defaultRTE">
    </div>
</div>
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import {RichTextEditor, Toolbar, Link, Image, HtmlEditor
} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor);

let defaultRTE: RichTextEditor = new RichTextEditor({
  value: `<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
            <p><b>Key features:</b></p>
            <ul>
                <li>
                    <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
                </li>
                <li>
                    <p>Capable of handling Markdown editing.</p>
                </li>
            </ul>`
});
defaultRTE.appendTo('#defaultRTE');

The WYSIWYG HTML editor toolbar provides a wide range of commands for editing and formatting content. It allows users to format text and paragraphs as well as insert images, hyperlinks, tables, and lists. The commands are organized into groups based on related functionality.

HTML editor toolbar simple example

JavaScript WYSIWYG HTML editor with multirow toolbar.

Toolbar commands that exceed the available space are automatically wrapped into additional rows within the toolbar.

Multi-row toolbar documentation

JavaScript WYSIWYG HTML editor with expandable toolbar.

Overflow toolbar commands hidden in subsequent rows become visible when the toolbar is expanded using the expand icon.

Expand toolbar documentation

JavaScript Rich Text Editor with quick toolbar.

This toolbar includes commonly used commands for text, images, tables, and links, enabling quick access to format these elements.

Quick toolbar documentation

JavaScript WYSIWYG HTML editor with floating toolbar.

The HTML5 editor toolbar does not remain fixed at the top; instead, it floats within the editor area as the page scrolls.

Floating toolbar documentation

Fully customizable tools in JavaScript Rich Text Editor.

Fully customizable

The HTML5 Rich Text Editor toolbar buttons are fully customizable. Users can add or remove buttons and group commands by category to tailor the toolbar to application needs, such as blog editing or email composing.

Customization documentation

JavaScript WYSIWYG HTML editor with custom toolbar.

Custom tool

Custom commands with specific actions can be added to the toolbar along with the built-in tools.

Custom tools documentation

JavaScript WYSIWYG inline HTML editor.

Inline mode

The JavaScript 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 JavaScript Rich Text Editor, users or groups can be tagged or chosen from a suggestion list.

JavaScript Rich Text Editor with mention and hashtag.

Enter and Shift+Enter key configurations

Customize tags inserted when pressing the Enter key and the Shift + Enter keys. You can configure the control to insert specific tags like P, which creates a <p> tag; DIV, which creates a <div> tag; and BR, which creates a
tag when either key combination is used.

Enter and Shift+Enter key configuration documentation

Editing experience

The JavaScript Rich Text Editor control provides a comprehensive range of tools and options for an enhanced editing experience.

Insert images in JavaScript WYSIWYG editor.

Insert images

Add images to content from local or server paths with captions and link URLs. Images can be uploaded to a server using drag-and-drop or file-upload functionality. The editor also supports inserting images in BLOB or Base64 formats.

Insert images documentation

Insert hyperlinks in WYSIWYG HTML5 editor.

Insert hyperlinks

Add or modify hyperlinks with options such as display text, tooltips, and settings to open links in a new window.

Insert hyperlinks documentation

Insert tables in JavaScript Markdown Text Editor.

Insert tables

Insert and edit HTML tables to display structured tabular data. Dynamically manage tables by adding or removing rows and columns, resizing tables or cells, and deleting tables when needed.

Insert tables documentation

JavaScript Rich Text Editor with table merge and split.

Table cell merge and split

Combine two or more rows or column cells into a single cell along with their content. A single cell can also be split horizontally or vertically.

Table cell merge and split documentation

JavaScript Rich Text Editor with text alignment tools.

Text alignment

Built-in options allow content to be justified or aligned to the left, center, or right.

Text alignment documentation

JavaScript Rich Text Editor with emoji.

Insert emoji

Add emoji to your content using a wide collection. Search and select the ones that match your message, and access the emoji picker by pressing the colon (:) key.

Insert emoji documentation

Formatting text

Apply formatting to selected content, entire paragraphs, or specific words and characters.
Style headings, quotations, code blocks, paragraphs, and more.
Use bold, italics, underline, strikethrough, or modify letter casing.
Adjust paragraph indentation and spacing.
Choose fonts and define font sizes.
Apply subscript and superscript styles.
Set font color and background color for content.

Formatting text documentation

JavaScript Rich Text Editor formatting text.

Custom list in JavaScript WYSIWYG HTML editor.

Adding custom lists

Create ordered (numbered) or unordered (bulleted) lists to organize content. Customize bullet styles for unordered lists with options such as circles or squares, and use different numbering formats like lowercase Greek or uppercase Roman for ordered lists.

Adding custom lists documentation

Full-screen text editor

Expand the JavaScript HTML5 editor to full-screen mode (full-page editor) for a more focused content editing experience.

Full screen text editor in JavaScript WYSIWYG HTML editor.

JavaScript Markdown editor with format on pasting.

Paste from Microsoft Word and Excel

The JavaScript Markdown Editor includes built-in options to paste content, including images, from Microsoft Word, Outlook, and Excel while filtering unnecessary tags, attributes, and styles. Users can choose to paste content as plain text, with cleaned styles, or with source formatting retained.

Auto-hyperlinking of URL

Automatically converts plain text URLs into clickable hyperlinks as they are typed.

Auto-link documentation

Validation in JavaScript WYSIWYG HTML editor.

JavaScript form validations

The JavaScript Rich Text Editor functions as a form control that supports HTML forms and captures values during form submission. It includes the following validation types:

Required validation
Maximum length validation

Example of form validation

Limit content length

Set a maximum character limit for the content to control how much text can be entered.

Maximum character count limit documentation

JavaScript WYSIWYG HTML editor maximum length.

Resizable editor

Includes built-in resizing support, allowing users to expand or shrink the content area as needed.

Resizable editor documentation

Insert an image through the file manager

The integrated file manager enables users to upload and insert images directly from cloud storage or a server.

Insert an image through file manager documentation

Insert an image through file manager in JavaScript WYSIWYG HTML editor.

JavaScript Rich Text Editor with format painter.

Format painter

The format painter allows users to copy formatting and apply it to other content easily. It can be accessed from the toolbar or through keyboard shortcuts for quick use. By double-clicking the toolbar button, sticky mode can be enabled to apply formatting across multiple sections continuously.

Format painter documentation

Rich Text Editor in JavaScript with clipboard operations.

Cut, copy, and paste

Supports standard clipboard operations, allowing users to cut, copy, and paste content easily.

Clipboard operations documentation

Rich Text Editor in JavaScript with undo redo actions.

Undo/redo manager

Maintains a history of editing actions, enabling users to undo or redo changes as needed.

JavaScript Rich Text Editor with print support.

Print text editor content

Print content directly using the toolbar option or programmatically, with formatting preserved.

Print example

Responsive JavaScript text editor.

Touch-friendly and responsive WYSIWYG editor

The editor recognizes touch gestures, allowing users to swipe left or right to move the toolbar. The responsive, mobile-friendly design provides the best user experience on all mobile, tablet, and desktop form factors.

JavaScript Rich Text Editor with customizable themes.

Built-in and customizable themes

Includes multiple built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast.

JavaScript Rich Text Editor APIs.

Developer-friendly APIs

There are sufficient client-side APIs available to optimize content editing.

Rich Text Editor API documentation

HTML editor accessibility

Keyboard navigation in JavaScript Rich Text Editor.

The JavaScript Rich Text Editor component ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component.

Keyboard navigation documentation

JavaScript Rich Text Editor accessibility.

The JavaScript Rich Text Editor view has complete WAI-ARIA accessibility support. Its UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.

Show right to left in JavaScript Rich Text Editor.

Right to Left (RTL)

The HTML5/JavaScript Rich Text Editor supports right-to-left rendering, allowing the text and layout of the text editor to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages such as Arabic, Farsi, and Hebrew.

RTL language documentation

Other supported frameworks

The Rich Text Editor is also available for the Blazor, React, Angular, and Vue frameworks. Explore its platform-specific options through the following links:

Supported browsers

The JavaScript Rich Text Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.

Supported browsers in JavaScript Rich Text Editor.

Not sure how to create your first JavaScript Rich Text Editor? Our documentation can help.

I’d love to read it now

Frequently Asked Questions

✅ Why should you choose the Syncfusion JavaScript Rich Text Editor?

The Syncfusion Rich Text Editor allows you to:

Edit WYSIWYG HTML and Markdown content with a rich set of tools for modern web and mobile applications.
Easily incorporate the editor into blog editor, message, HTML email composer, and discussion forum-like applications.
Make a floating toolbar or inline editor that allows you to select any editable element on the page and edit in place.
Enjoy simple configuration and API.
Render on all modern browsers with ease.
Utilize atouch-friendly and responsive UI.
Take advantage of expansive learning resources such as demos and documentation to get started quickly with the control.

✅ Where can I find the Syncfusion JavaScript Rich Text Editor demo?

You can find our JavaScript Rich Text Editor demo here.

✅ Can I download and utilize the Syncfusion JavaScript Rich Text Editor for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with the Syncfusion JavaScript Rich Text Editor?

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Nice suite of components

A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.

John A.

C# Developer (Contract)

Perfect for any developer

The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.

Dejan D.

Chief Executive Officer

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)