@syncfusion/ej2-react-richtexteditor

27.1.58 • 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.42548beta
27.1.58144latest

Version History

VersionDownloads (Last 7 Days)Published
27.1.58144
27.1.57390
27.1.55177
27.1.52477
27.1.51120
27.1.5016
27.1.48138
26.2.14984
26.2.1311
26.2.12111
26.2.111
26.2.1057
26.2.951
26.2.81
26.2.766
26.2.541
26.2.423
26.1.4228
26.1.4144
26.1.404
26.1.38104
26.1.3528
25.2.7325
25.2.61
25.2.510
25.2.412
25.2.3121
25.1.4278
25.1.4130
25.1.4095
25.1.3918
25.1.3815
25.1.370
25.1.35163
24.2.986
24.2.81
24.2.732
24.2.419
24.2.312
24.1.47265
24.1.46334
24.1.4587
24.1.430
24.1.4118
23.2.7211
23.2.658
23.2.555
23.2.40
23.1.4451
23.1.43196
23.1.41204
23.1.4080
23.1.3910
23.1.36238
22.2.12106
22.2.1011
22.2.911
22.2.5269
22.1.395
22.1.3836
22.1.361
21.1.42548
21.1.360
22.1.34120
21.2.10400
21.2.95
21.2.812
21.2.61
21.2.50
21.2.48
21.2.3177
21.1.414
21.1.3966
21.1.372
21.1.352
20.4.53158
20.4.521
20.4.510
20.4.508
20.4.491
20.4.4834
20.4.441
20.4.4395
20.4.4216
20.4.4067
20.4.3815
20.3.6199
20.3.606
20.3.5912
20.3.5622
20.3.50260
20.3.4780
20.2.5027
20.2.4912
18.4.42-709434
20.2.4633
20.2.459
20.2.444
20.2.437
20.2.407
20.2.391
20.2.3823
20.2.36347
20.1.616
20.1.6029
20.1.591
20.1.5823
20.1.573
20.1.563
20.1.550
20.1.521
20.1.518
20.1.501
20.1.480
20.1.471
19.4.561,274
19.4.5512
19.4.541
19.4.530
19.4.5212
19.4.50187
19.4.480
19.4.470
19.4.400
19.4.384
19.3.5725
19.3.556
19.3.5315
19.3.47115
19.3.467
19.3.451
19.3.445
19.3.431
19.2.6226
19.2.601
19.2.597
19.2.570
19.2.563
19.2.550
19.2.513
19.2.496
19.2.480
19.2.470
19.2.468
19.2.447
19.1.6911
19.1.670
19.1.663
19.1.650
19.1.640
19.1.630
19.1.591
19.1.577
19.1.5618
19.1.550
19.1.540
18.4.49169
18.4.483
18.4.470
18.4.460
18.4.442
18.4.421
18.4.390
18.4.350
17.2.55-12054790
18.4.340
18.4.330
18.4.320
18.4.301
18.3.525
17.2.52-12054790
18.3.501
18.3.480
18.3.471
18.3.440
18.3.420
18.3.400
18.3.355
18.2.5612
18.2.551
18.2.541
18.2.480
18.2.4613
18.2.454
18.2.448
18.1.5747
18.1.5418
18.1.531
18.1.520
18.1.480
18.1.450
18.1.441
18.1.431
18.1.4229
18.1.36-beta0
17.4.5516
17.4.510
17.4.4992
17.4.480
17.4.470
17.4.460
17.4.440
17.4.430
17.4.400
17.4.390
17.3.291
17.3.281
17.3.270
17.3.260
17.3.190
17.3.161
17.3.141
17.3.9-beta0
17.2.520
17.2.510
17.2.491
17.2.48-beta0
17.2.29-beta0
17.2.470
17.2.460
17.2.410
17.2.391
17.2.360
17.2.351
17.2.340
17.2.28-beta0
17.1.490
17.1.481
17.1.470
17.1.432
17.1.420
17.1.401
17.1.380
17.1.32-beta0
16.4.550
16.4.540
16.4.530
16.4.520
17.1.1-beta0
16.4.480
16.4.470
16.4.460
16.4.441
16.4.421
16.4.40-beta0
16.3.341
16.3.330
16.3.301
16.3.290
16.3.270
16.3.241
16.3.220
16.3.210
16.3.170
16.2.520
16.2.510
16.2.500
16.2.491
16.2.480
16.2.470
16.2.460
16.2.450
16.2.440
16.2.410

Package Sidebar

Install

npm i @syncfusion/ej2-react-richtexteditor

Weekly Downloads

3,727

Version

27.1.58

License

SEE LICENSE IN license

Unpacked Size

48.4 kB

Total Files

134

Last publish

Collaborators

  • syncfusionorg
  • essentialjs2
  • syncfusion-javascript