@syncfusion/ej2-richtexteditor

v34.1.30

Published

4 days 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

AI Assistant - The AI Assistant helps generate, rewrite, summarize, and refine editor content. It is designed to speed up content creation and improve editing productivity.
Paste from MS Word - Paste from MS Word brings content into the editor with formatting cleanup and structure preservation. It helps users reuse Word content without carrying over unwanted styles.
IFrame - IFrame mode renders the editor content inside an isolated document context. It helps improve style encapsulation and reduces interference from external page styles.
@Mentions - Mentions let users tag people, topics, or items with an autocomplete suggestion list. They make collaboration and inline referencing faster and more accurate.
Slash Menu - Slash menu support lets users trigger editor commands by typing a forward slash. It provides a quick way to insert content blocks and formatting actions.
Checklist - Checklist support enables users to create interactive task lists in the editor. It is useful for organizing work items and tracking progress within content.
Accessibility & WCAG 2.0 Compliance - Accessibility support helps the editor work with assistive technologies and keyboard navigation. It ensures the component can be used more effectively by a broader audience.
Preventing Cross-Site Scripting (XSS) - XSS protection helps validate and sanitize editor content before it is used or rendered. It reduces security risks by blocking malicious scripts and unsafe markup.
HTML code editing - HTML code editing lets users view and edit the underlying markup directly. It is helpful when precise control over the document structure is required.
Markdown editor - Markdown editor mode lets users create and edit content using Markdown syntax. It is ideal for lightweight authoring and text-based workflows.
Custom Toolbar Items - Custom toolbar items allow additional actions to be added to the editor toolbar. They help tailor the editing experience to specific application needs.
Quick Toolbar - Quick Toolbar shows contextual actions for selected content such as text, images, and tables. It helps users apply common operations without leaving the editing area.
File Browser - File Browser integration allows users to browse and select files within editor workflows. It supports file-based content management in a more seamless way.
Emoji Picker - Emoji picker support lets users insert emojis into the editor content. It helps make messages and content more expressive and engaging.
Insert Media - Insert Media allows audio and video content to be embedded in the editor. It is useful for creating richer and more interactive documents.
Toolbar - Toolbar support provides editing controls and customization options for the editor. It supports floating behavior, multiple layout types, and toolbar positioning for flexible UI setups.
Export and Import - Export and Import support allows content to be moved between the editor and document formats such as PDF and Word. It simplifies content sharing, archiving, and document processing.
Undo and redo - Undo and redo support lets users reverse or repeat recent editing actions. It improves editing confidence by making changes easier to correct.
Module injection - Module injection lets the editor load only the features that are needed. It helps reduce bundle size and keeps the component more efficient.
Third-party integration - Third-party integration lets the editor work with external libraries and services. It extends the editor with additional capabilities beyond the built-in feature set.

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