@syncfusion/ej2-richtexteditor

v34.2.6

Published

3 days ago

Essential JS 2 RichTextEditor component

JavaScript Rich Text Editor | JavaScript Markdown Editor

Using this package with an AI coding agent
Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:
Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com/agent-setup/prompt.md, then report the detected platform, installed skill pack, MCP status, and any required licensing action.
The setup detects your project’s platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.
Platform reference: https://ai.syncfusion.com/javascript/llms.txt

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

This guide uses Vite as the bundler and development environment for the JavaScript Rich Text Editor. Install Node.js before proceeding. For detailed information about Vite's capabilities and configuration options, refer to the Vite documentation.

Create a TypeScript application

To set up a TypeScript application, run the following command.

npm create vite@latest my-app -- --template vanilla-ts

This command will prompt you to install the required packages and start the application. As Syncfusion packages are not installed yet, select the No option.

Then, navigate to the project directory and install the dependencies:

cd my-app
npm install

Install the Rich Text Editor package

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

npm install @syncfusion/ej2-richtexteditor --save

Add the CSS reference

Install the Syncfusion® Tailwind 3 theme package:

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/style.css file:

@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';

Add the Rich Text 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="editor"></div>
    </body>
</html>

Add the Rich Text Editor control with required modules

Add the Rich Text Editor control to the src/app/app.ts file with the basic required modules, Toolbar, Image, Link, HtmlEditor, and QuickToolbar, injected using the Inject method, and add the control's HTML elements to the src/index.html file:

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

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

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

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.