@syncfusion/ej2-richtexteditor

v31.2.18

Published

17 hours ago

Essential JS 2 RichTextEditor component

JavaScript Rich Text Editor | JavaScript Markdown Editor

The JavaScript RichTextEditor is a feature-rich WYSIWYG HTML editor and Markdown editor. The Rich Text Editor is widely used to create blogs, forum posts, notes sections, comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has a variety of tools to edit and format rich content, and it return a valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, media files and lists with modular architectures.

⚡️ Quick Start

The JavaScript Rich Text Editor is easy to set up. Simply install the package, import the module, and add the editor to your app.

Installation

To install the Rich Text Editor and its dependencies via npm, run the following command:

npm install @syncfusion/ej2-richtexteditor --save

Add the Editor Element

In your HTML file, add a target element:

<!DOCTYPE html>
<html>
    <head>
        <!-- Includes all CSS for the Rich Text Editor -->
    </head>
    <body>
        <!-- Your Rich Text Editor container -->
        <div id="richTextEditor"></div>
    </body>
</html>

Import the Module

Import the Rich Text Editor module into your application:

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

Initialize the Editor

Create an instance of the Rich Text Editor and append it to a target element:

let editor = new RichTextEditor({
   height: '300px',
   toolbarSettings: {
       items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', '|', 'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'Undo', 'Redo']
   }
});
editor.appendTo('#richTextEditor');

Run the Application

Now, open your project in a browser, and the Rich Text Editor will be displayed! 🚀

🛠️ Supported frameworks

Rich Text Editor control is also offered in following list of frameworks.

| Angular | React | Vue | ASP.NET Core | ASP.NET MVC | | :-----: | :-----: | :-----: | :-----: | :-----: |

🏗️ Showcase samples

✨ Key features

Edit mode - HTML content is possible to edit in a div element or an iframe in the rich text editor.
@Mentions - Easily mention users, tags, or items with an autocomplete suggestion list.
Slash Menu Support - Quickly insert content blocks using the / command.
Checklist Suport - Allows users to create checklists (to-do lists) directly within the editor. Users can easily add interactive checkbox items to their content.
Accessibility & WCAG 2.0 Compliance - Ensures full accessibility support, making it user-friendly for people who rely on assistive technologies (AT) or keyboard navigation.
Preventing Cross-Site Scripting (XSS) - The Rich Text Editor allows users to edit the content with security by preventing cross-site scripting (XSS).
HTML code editing - The rich text editor allows users to edit the HTML code directly in the HTML code view.
Markdown editor - The rich text editor allows you to edit Markdown content using the Markdown syntax.
Markdown content preview - Preview of the modified Markdown content in the editor, you can give users the ability to see what the formatted content will look like before they save it.
Tools - The rich text editor handles a wide range of features, including inserting images, hyperlinks, tables, formatting tools, and more.
Toolbar appearance - The rich text editor can provide a fully customizable toolbar that allows users to access the various formatting and editing options that are available.
Export and Import - Supports exporting content to PDF, and Word formats.
Copy and paste - Copy and paste from Microsoft Word, Outlook, or other editors or sources while preserving formatting, styles, and structure.
Undo and redo - Users can use undo and redo actions to reverse or repeat actions they took while editing the content.
Module injection - It is possible to create a editor that utilizes a modular library to load the necessary functionality on demand. This can be useful for optimizing the performance of the editor.
Third-party integration - It is possible to integrate a third-party library into a rich text editor to add additional functionality or features to the editor like Code-mirror, Embedly and more.

📚 Resources

🤝 Support

Product support is available through the following mediums.

Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
Community forum
GitHub issues
Request feature or report bug
Live chat

🔄 Change log

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

⚖️ License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® EULA. To acquire a license for 140+ JavaScript UI controls, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.