@syncfusion/ej2-react-richtexteditor

27.2.3 • Public • Published

React RichTextEditor Component

The React Rich Text Editor component is a feature-rich WYSIWYG HTML editor and WYSIWYG 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.

Getting started . Online demos . Learn more

React RichTextEditor Component

Trusted by the world's leading companies Bootstrap logo

Setup

Create a React Application

You can use create-react-app to setup applications. To create React app use the following command.

npx create-react-app my-app --template typescript
cd my-app
npm start

Adding Syncfusion Rich Text Editor package

To install RichTextEditor component and its dependent packages, use the following command.

npm install @syncfusion/ej2-react-richtexteditor --save

Adding CSS references for Rich Text Editor

Add CSS references needed for Rich Text Editor in src/App.css from ../node_modules/@syncfusion package folder.

@import '../../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-richtexteditor/styles/bootstrap5.css';

Add Rich Text Editor Component

In src/App.tsx file, use the following code snippet to render the Syncfusion React Rich Text Editor control and import App.css to apply styles to the richtexteditor:

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';

function App() {
    return (
            <div className="App">
                <RichTextEditorComponent>
                    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
                    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
                </RichTextEditorComponent>
            </div>
        );
};
export default App;

Supported frameworks

RichTextEditor component is also offered in the following frameworks.


     JavaScript    

       Angular      

       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.
  • 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.
  • HTML code editing - The rich text editor allows users to edit the HTML code directly in the HTML code view. This can be useful for users who are familiar with HTML and want to have more control over the formatting and layout of their content.
  • 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.
  • 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.

Support

Product support is available through the following mediums.

Changelog

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’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 80+ React UI components, 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.

© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
21.1.42478beta
27.2.358latest

Version History

VersionDownloads (Last 7 Days)Published
27.2.358
27.2.2881
27.1.58307
27.1.5761
27.1.55146
27.1.52356
27.1.5182
27.1.508
27.1.48105
26.2.141,082
26.2.1323
26.2.12117
26.2.119
26.2.1077
26.2.947
26.2.84
26.2.786
26.2.575
26.2.497
26.1.4219
26.1.4157
26.1.4010
26.1.38130
26.1.358
25.2.7296
25.2.68
25.2.529
25.2.414
25.2.396
25.1.4272
25.1.4140
25.1.4064
25.1.3934
25.1.3818
25.1.370
25.1.35133
24.2.9265
24.2.829
24.2.766
24.2.425
24.2.324
24.1.47260
24.1.46292
24.1.4567
24.1.430
24.1.4113
23.2.7275
23.2.6134
23.2.543
23.2.41
23.1.4451
23.1.432
23.1.4138
23.1.401
23.1.394
23.1.3624
22.2.1250
22.2.106
22.2.918
22.2.5167
22.1.392
22.1.386
22.1.365
21.1.42478
21.1.361
22.1.3491
21.2.10245
21.2.94
21.2.81
21.2.60
21.2.51
21.2.41
21.2.318
21.1.4117
21.1.3912
21.1.3715
21.1.351
20.4.5371
20.4.521
20.4.511
20.4.503
20.4.493
20.4.489
20.4.441
20.4.4388
20.4.422
20.4.4029
20.4.381
20.3.6118
20.3.603
20.3.591
20.3.569
20.3.501
20.3.472
20.2.5019
20.2.491
18.4.42-709439
20.2.462
20.2.453
20.2.441
20.2.437
20.2.401
20.2.391
20.2.385
20.2.36226
20.1.615
20.1.6022
20.1.592
20.1.5816
20.1.571
20.1.561
20.1.552
20.1.521
20.1.511
20.1.501
20.1.481
20.1.471
19.4.56603
19.4.551
19.4.542
19.4.531
19.4.5219
19.4.50111
19.4.481
19.4.471
19.4.401
19.4.3810
19.3.5743
19.3.551
19.3.533
19.3.4735
19.3.461
19.3.453
19.3.442
19.3.431
19.2.6212
19.2.601
19.2.5913
19.2.571
19.2.561
19.2.551
19.2.5111
19.2.491
19.2.481
19.2.471
19.2.461
19.2.441
19.1.6922
19.1.671
19.1.661
19.1.651
19.1.641
19.1.631
19.1.591
19.1.572
19.1.561
19.1.551
19.1.541
18.4.4988
18.4.481
18.4.471
18.4.461
18.4.444
18.4.421
18.4.392
18.4.351
17.2.55-12054791
18.4.341
18.4.331
18.4.321
18.4.301
18.3.521
17.2.52-12054791
18.3.501
18.3.482
18.3.471
18.3.441
18.3.421
18.3.401
18.3.351
18.2.567
18.2.551
18.2.541
18.2.481
18.2.461
18.2.451
18.2.443
18.1.5716
18.1.545
18.1.5321
18.1.521
18.1.481
18.1.451
18.1.441
18.1.431
18.1.422
18.1.36-beta1
17.4.551
17.4.511
17.4.491
17.4.481
17.4.471
17.4.461
17.4.441
17.4.431
17.4.401
17.4.391
17.3.291
17.3.281
17.3.272
17.3.261
17.3.191
17.3.161
17.3.141
17.3.9-beta1
17.2.521
17.2.511
17.2.491
17.2.48-beta1
17.2.29-beta1
17.2.471
17.2.461
17.2.412
17.2.391
17.2.361
17.2.351
17.2.341
17.2.28-beta1
17.1.491
17.1.481
17.1.471
17.1.431
17.1.421
17.1.402
17.1.381
17.1.32-beta1
16.4.551
16.4.541
16.4.531
16.4.521
17.1.1-beta1
16.4.481
16.4.471
16.4.461
16.4.441
16.4.421
16.4.40-beta1
16.3.341
16.3.332
16.3.301
16.3.291
16.3.271
16.3.241
16.3.221
16.3.211
16.3.171
16.2.521
16.2.511
16.2.501
16.2.491
16.2.481
16.2.471
16.2.461
16.2.451
16.2.441
16.2.411

Package Sidebar

Install

npm i @syncfusion/ej2-react-richtexteditor

Weekly Downloads

9,143

Version

27.2.3

License

SEE LICENSE IN license

Unpacked Size

48.4 kB

Total Files

134

Last publish

Collaborators

  • syncfusionorg
  • essentialjs2
  • syncfusion-javascript