@syncfusion/ej2-react-richtexteditor 31.2.3 → 31.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,46 +1,55 @@
|
|
|
1
|
-
# React
|
|
1
|
+
# React Rich Text Editor Component | React Markdown Editor
|
|
2
2
|
|
|
3
|
-
The [React Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-rich-text-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)
|
|
3
|
+
The [React Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-rich-text-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) 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.
|
|
4
4
|
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
</
|
|
5
|
+
<div align="center">
|
|
6
|
+
<h4>
|
|
7
|
+
<a href="https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-richtexteditor-npm">📖Getting started</a> •
|
|
8
|
+
<a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-richtexteditor-npm#/bootstrap5/rich-text-editor/tools">🚀Online demos</a> •
|
|
9
|
+
<a href="https://www.syncfusion.com/react-components/react-wysiwyg-rich-text-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-richtexteditor-npm">🌐Learn more</a>
|
|
10
|
+
</h4>
|
|
11
|
+
</div>
|
|
10
12
|
|
|
11
13
|
<p align="center">
|
|
12
|
-
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/
|
|
14
|
+
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-rich-text-editor-new.gif" alt="React RichTextEditor Component"/>
|
|
13
15
|
</p>
|
|
14
16
|
|
|
15
17
|
<p align="center">
|
|
16
18
|
Trusted by the world's leading companies
|
|
17
19
|
<a href="https://www.syncfusion.com">
|
|
18
|
-
<img src="https://
|
|
20
|
+
<img src="https://ej2.syncfusion.com/home/images/trusted_companies.png" alt="Bootstrap logo">
|
|
19
21
|
</a>
|
|
20
22
|
</p>
|
|
21
23
|
|
|
22
|
-
##
|
|
24
|
+
## ⚡️ Quick Start
|
|
25
|
+
|
|
26
|
+
Syncfusion<sup>®</sup> Rich Text Editor is easy to integrate into React applications. Just install the package, configure styles, inject required modules, and render the component.
|
|
23
27
|
|
|
24
|
-
###
|
|
28
|
+
### 🛠️ Installation
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
Install the Rich Text Editor and its dependencies using npm:
|
|
27
31
|
|
|
28
32
|
```bash
|
|
29
|
-
|
|
30
|
-
cd my-app
|
|
31
|
-
npm start
|
|
33
|
+
npm install @syncfusion/ej2-react-richtexteditor --save
|
|
32
34
|
```
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
This command will:
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
- Add the `@syncfusion/ej2-react-richtexteditor` package and its peer dependencies to your `package.json` file.
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
### ⚙️ Setup
|
|
41
|
+
|
|
42
|
+
#### 1. Create a React Application
|
|
40
43
|
|
|
44
|
+
Use `Vite` to scaffold a new React + TypeScript project:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm create vite@latest my-app -- --template react-ts
|
|
48
|
+
cd my-app
|
|
49
|
+
npm run dev
|
|
41
50
|
```
|
|
42
51
|
|
|
43
|
-
|
|
52
|
+
#### 2. Add CSS References
|
|
44
53
|
|
|
45
54
|
Add CSS references needed for Rich Text Editor in **src/App.css** from **../node_modules/@syncfusion** package folder.
|
|
46
55
|
|
|
@@ -56,55 +65,129 @@ Add CSS references needed for Rich Text Editor in **src/App.css** from **../node
|
|
|
56
65
|
@import '../../node_modules/@syncfusion/ej2-richtexteditor/styles/bootstrap5.css';
|
|
57
66
|
```
|
|
58
67
|
|
|
59
|
-
###
|
|
68
|
+
### 🔌 Inject Required Services
|
|
60
69
|
|
|
61
|
-
|
|
70
|
+
To enable features like toolbar, image, link, and HTML editing, inject the required services using the `<Inject />` directive.
|
|
62
71
|
|
|
63
72
|
```typescript
|
|
64
|
-
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
|
|
65
73
|
import * as React from 'react';
|
|
66
74
|
import './App.css';
|
|
75
|
+
import {
|
|
76
|
+
HtmlEditor,
|
|
77
|
+
Image,
|
|
78
|
+
Inject,
|
|
79
|
+
Link,
|
|
80
|
+
QuickToolbar,
|
|
81
|
+
RichTextEditorComponent,
|
|
82
|
+
Toolbar
|
|
83
|
+
} from '@syncfusion/ej2-react-richtexteditor';
|
|
67
84
|
|
|
68
85
|
function App() {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
86
|
+
return (
|
|
87
|
+
<div className="App">
|
|
88
|
+
<RichTextEditorComponent>
|
|
89
|
+
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
|
|
90
|
+
</RichTextEditorComponent>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
|
|
78
95
|
export default App;
|
|
79
96
|
```
|
|
97
|
+
<blockquote>
|
|
98
|
+
<p>ℹ️ <b>Note:</b></p>
|
|
99
|
+
<span>For detailed information on module injection and available services, refer to the Syncfusion Rich Text Editor Module <a href="https://ej2.syncfusion.com/react/documentation/rich-text-editor/module">Documentation</a>.</span>
|
|
100
|
+
</blockquote>
|
|
101
|
+
|
|
102
|
+
### 🧩 Add the Rich Text Editor Component
|
|
103
|
+
|
|
104
|
+
In **src/App.tsx** file, use the following code snippet to render the Syncfusion<sup>®</sup> React Rich Text Editor component.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import * as React from 'react';
|
|
108
|
+
import './App.css';
|
|
109
|
+
import {
|
|
110
|
+
HtmlEditor,
|
|
111
|
+
Image,
|
|
112
|
+
Inject,
|
|
113
|
+
Link,
|
|
114
|
+
QuickToolbar,
|
|
115
|
+
RichTextEditorComponent,
|
|
116
|
+
Toolbar
|
|
117
|
+
} from '@syncfusion/ej2-react-richtexteditor';
|
|
80
118
|
|
|
81
|
-
|
|
119
|
+
function App() {
|
|
120
|
+
return (
|
|
121
|
+
<div className="App">
|
|
122
|
+
<RichTextEditorComponent>
|
|
123
|
+
<p>Start editing your content here.</p>
|
|
124
|
+
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
|
|
125
|
+
</RichTextEditorComponent>
|
|
126
|
+
</div>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
82
129
|
|
|
83
|
-
|
|
130
|
+
export default App;
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## 🛠️ Supported frameworks
|
|
134
|
+
|
|
135
|
+
Rich Text Editor control is also offered in following list of frameworks.
|
|
84
136
|
|
|
85
137
|
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/> [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/> [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) |
|
|
86
138
|
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
87
139
|
|
|
88
|
-
## Showcase samples
|
|
140
|
+
## 🏗️ Showcase samples
|
|
89
141
|
|
|
90
142
|
* [React HTML editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/tools)
|
|
91
143
|
* [Blog posting using react rich text editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/blog-posting)
|
|
92
144
|
* [React Markdown editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/markdown-editor)
|
|
93
145
|
* [React live HTML editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/online-html-editor)
|
|
94
146
|
|
|
95
|
-
## Key features
|
|
147
|
+
## ✨ Key features
|
|
96
148
|
|
|
97
149
|
* [Edit mode](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/iframe) - HTML content is possible to edit in a `div` element or an `iframe` in the rich text editor.
|
|
150
|
+
|
|
151
|
+
* [@Mentions](https://ej2.syncfusion.com/react/demos/#/bootstrap5/rich-text-editor/mention-integration) - Easily mention users, tags, or items with an autocomplete suggestion list.
|
|
152
|
+
|
|
153
|
+
* [Slash Menu Support](https://ej2.syncfusion.com/react/demos/#/bootstrap5/rich-text-editor/smart-suggestion) - Quickly insert content blocks using the `/` command.
|
|
154
|
+
|
|
155
|
+
* [Checklist Suport](https://ej2.syncfusion.com/react/demos/#/bootstrap5/rich-text-editor/tools) - Allows users to create checklists (to-do lists) directly within the editor. Users can easily add interactive checkbox items to their content.
|
|
156
|
+
|
|
157
|
+
* [Accessibility & WCAG 2.0 Compliance](https://ej2.syncfusion.com/react/documentation/rich-text-editor/accessibility) - Ensures full accessibility support, making it user-friendly for people who rely on assistive technologies (AT) or keyboard navigation.
|
|
158
|
+
|
|
159
|
+
* [Preventing Cross-Site Scripting (XSS)](https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/prevent-cross-site-scripting/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-richtexteditor-npm) - The Rich Text Editor allows users to edit the content with security by preventing cross-site scripting (XSS).
|
|
160
|
+
|
|
161
|
+
* [HTML code editing](https://ej2.syncfusion.com/react/documentation/rich-text-editor/miscellaneous/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/rich-text-editor/#code-view) - The rich text editor allows users to edit the HTML code directly in the HTML code view.
|
|
162
|
+
|
|
98
163
|
* [Markdown editor](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/markdown-editor-preview) - The rich text editor allows you to edit Markdown content using the Markdown syntax.
|
|
164
|
+
|
|
99
165
|
* [Markdown content preview](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/markdown-editor-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.
|
|
100
|
-
|
|
166
|
+
|
|
101
167
|
* [Tools](https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#toolbar-items) - The rich text editor handles a wide range of features, including inserting images, hyperlinks, tables, formatting tools, and more.
|
|
168
|
+
|
|
102
169
|
* [Toolbar appearance](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/bootstrap5/rich-text-editor/types) - The rich text editor can provide a fully customizable toolbar that allows users to access the various formatting and editing options that are available.
|
|
103
|
-
|
|
170
|
+
|
|
171
|
+
* [Export and Import](https://ej2.syncfusion.com/react/demos/#/bootstrap5/rich-text-editor/export-document) - Supports exporting content to PDF, and Word formats.
|
|
172
|
+
|
|
173
|
+
* [Copy and paste](https://ej2.syncfusion.com/react/documentation/rich-text-editor/paste-cleanup) - Copy and paste from Microsoft Word, Outlook, or other editors or sources while preserving formatting, styles, and structure.
|
|
174
|
+
|
|
175
|
+
* [Undo and redo](https://ej2.syncfusion.com/react/documentation/rich-text-editor/undo-redo) - Users can use undo and redo actions to reverse or repeat actions they took while editing the content.
|
|
176
|
+
|
|
104
177
|
* [Module injection](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#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.
|
|
178
|
+
|
|
105
179
|
* [Third-party integration](https://ej2.syncfusion.com/react/documentation/rich-text-editor/third-party-integration/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - 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.
|
|
106
180
|
|
|
107
|
-
##
|
|
181
|
+
## 📚 Resources
|
|
182
|
+
|
|
183
|
+
* [Documentation](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started)
|
|
184
|
+
* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview)
|
|
185
|
+
* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
|
|
186
|
+
* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github)
|
|
187
|
+
* [Road Map](https://www.syncfusion.com/products/roadmap/react)
|
|
188
|
+
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all)
|
|
189
|
+
|
|
190
|
+
## 🤝 Support
|
|
108
191
|
|
|
109
192
|
Product support is available through the following mediums.
|
|
110
193
|
|
|
@@ -114,13 +197,13 @@ Product support is available through the following mediums.
|
|
|
114
197
|
* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-richtexteditor-npm)
|
|
115
198
|
* Live chat
|
|
116
199
|
|
|
117
|
-
##
|
|
200
|
+
## 🔄 Change log
|
|
118
201
|
|
|
119
202
|
Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/richtexteditor/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
|
|
120
203
|
|
|
121
|
-
## License and copyright
|
|
204
|
+
## ⚖️ License and copyright
|
|
122
205
|
|
|
123
|
-
> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for
|
|
206
|
+
> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
|
|
124
207
|
|
|
125
208
|
> A free community [license](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
|
|
126
209
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-react-richtexteditor.min.js
|
|
3
|
-
* version : 31.2.
|
|
3
|
+
* version : 31.2.4
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-react-richtexteditor.umd.min.js
|
|
3
|
-
* version : 31.2.
|
|
3
|
+
* version : 31.2.4
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@syncfusion/ej2-react-richtexteditor",
|
|
3
|
-
"version": "31.2.
|
|
3
|
+
"version": "31.2.4",
|
|
4
4
|
"description": "Essential JS 2 RichTextEditor component for React",
|
|
5
5
|
"author": "Syncfusion Inc.",
|
|
6
6
|
"license": "SEE LICENSE IN license",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"es2015": "dist/es6/ej2-react-richtexteditor.es2015.js",
|
|
20
20
|
"readme": "ReadMe.md",
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@syncfusion/ej2-base": "~31.2.
|
|
22
|
+
"@syncfusion/ej2-base": "~31.2.4",
|
|
23
23
|
"@syncfusion/ej2-react-base": "~31.2.2",
|
|
24
|
-
"@syncfusion/ej2-richtexteditor": "31.2.
|
|
24
|
+
"@syncfusion/ej2-richtexteditor": "31.2.4"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {},
|
|
27
27
|
"sideEffects": false,
|