@syncfusion/ej2-angular-richtexteditor 34.2.5 → 34.2.6
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/CHANGELOG.md +14 -0
- package/README.md +117 -55
- package/package.json +4 -4
- package/schematics/utils/lib-details.js +2 -2
- package/schematics/utils/lib-details.ts +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -6,8 +6,22 @@
|
|
|
6
6
|
|
|
7
7
|
#### Bug Fixes
|
|
8
8
|
|
|
9
|
+
- `#I863146` - Now, list item indentation is preserved correctly when pasting content from Microsoft Word into the Rich Text Editor.
|
|
10
|
+
|
|
11
|
+
- `#I869098` - Now, a new column can be added correctly after merging table cells in the Rich Text Editor.
|
|
12
|
+
|
|
13
|
+
- `#I867778` - Now, the Rich Text Editor no longer throws a script error when releasing the mouse outside the editor while the QuickToolbar module is not injected.
|
|
14
|
+
|
|
15
|
+
## 34.2.5 (2026-08-25)
|
|
16
|
+
|
|
17
|
+
### RichTextEditor
|
|
18
|
+
|
|
19
|
+
#### Bug Fixes
|
|
20
|
+
|
|
9
21
|
- `#I838893` - Now, in iOS devices, the cursor remains correctly positioned after the mention chip when Backspace is pressed in the Rich Text Editor.
|
|
10
22
|
|
|
23
|
+
- `#I863146` - Now, content formatting is preserved correctly when pasting content from a Microsoft Word document into the Rich Text Editor.
|
|
24
|
+
|
|
11
25
|
## 34.2.4 (2026-08-18)
|
|
12
26
|
|
|
13
27
|
### RichTextEditor
|
package/README.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Angular Rich Text Editor | Angular Markdown Editor
|
|
2
2
|
|
|
3
|
+
> **Using this package with an AI coding agent**
|
|
4
|
+
>
|
|
5
|
+
> Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:
|
|
6
|
+
>
|
|
7
|
+
> ```text
|
|
8
|
+
> 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.
|
|
9
|
+
> ```
|
|
10
|
+
> 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.
|
|
11
|
+
>
|
|
12
|
+
> **Platform reference:** [https://ai.syncfusion.com/angular/llms.txt](https://ai.syncfusion.com/angular/llms.txt)
|
|
13
|
+
|
|
3
14
|
The [Angular RichTextEditor](https://www.syncfusion.com/rich-text-editor-sdk/angular-rich-text-editor?utm_source=npm&utm_medium=listing&utm_campaign=angular-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 component 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
15
|
|
|
5
16
|
<div align="center">
|
|
@@ -23,76 +34,86 @@ Trusted by the world's leading companies
|
|
|
23
34
|
|
|
24
35
|
## ⚡️ Quick Start
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
This guide uses the Angular CLI as the development environment for the Angular Rich Text Editor. Install [Node.js](https://nodejs.org/), and the [Angular CLI](https://github.com/angular/angular-cli), before proceeding.
|
|
27
38
|
|
|
28
|
-
###
|
|
39
|
+
### Create an Angular application
|
|
29
40
|
|
|
30
|
-
|
|
41
|
+
To set up the Angular CLI globally, run the following command.
|
|
31
42
|
|
|
32
|
-
```
|
|
33
|
-
npm install @
|
|
43
|
+
```sh
|
|
44
|
+
npm install -g @angular/cli
|
|
34
45
|
```
|
|
35
46
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
* Adds `@syncfusion/ej2-angular-richtexteditor` package and its peer dependencies to your `package.json` file.
|
|
39
|
-
* Registers the Syncfusion<sup>®</sup> UI default theme (tailwind) in the `angular.json` file.
|
|
47
|
+
Then create a new application:
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
```sh
|
|
50
|
+
ng new my-app
|
|
51
|
+
```
|
|
42
52
|
|
|
43
|
-
|
|
53
|
+
This command prompts you to configure the stylesheet format, Server-Side Rendering (SSR/SSG), and AI tooling options. Select the options that best fit the project.
|
|
44
54
|
|
|
45
|
-
|
|
55
|
+
Navigate to the project folder:
|
|
46
56
|
|
|
47
|
-
```
|
|
48
|
-
npm install -g @angular/cli
|
|
49
|
-
ng new my-app
|
|
57
|
+
```sh
|
|
50
58
|
cd my-app
|
|
51
59
|
```
|
|
52
60
|
|
|
53
|
-
|
|
61
|
+
### Install the Rich Text Editor package
|
|
54
62
|
|
|
55
|
-
|
|
63
|
+
The `@syncfusion/ej2-angular-richtexteditor` package supports Angular 14 and later.
|
|
56
64
|
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
|
|
61
|
-
import { AppComponent } from './app.component';
|
|
62
|
-
|
|
63
|
-
@NgModule({
|
|
64
|
-
declarations: [AppComponent],
|
|
65
|
-
imports: [BrowserModule, RichTextEditorAllModule],
|
|
66
|
-
bootstrap: [AppComponent]
|
|
67
|
-
})
|
|
68
|
-
export class AppModule { }
|
|
65
|
+
```sh
|
|
66
|
+
npm install @syncfusion/ej2-angular-richtexteditor --save
|
|
67
|
+
```
|
|
69
68
|
|
|
69
|
+
### Add the CSS reference
|
|
70
|
+
|
|
71
|
+
Install the Syncfusion<sup>®</sup> [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package:
|
|
72
|
+
|
|
73
|
+
```sh
|
|
74
|
+
npm install @syncfusion/ej2-tailwind3-theme --save
|
|
70
75
|
```
|
|
71
76
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
Then add the following CSS reference to the `src/styles.css` file:
|
|
78
|
+
|
|
79
|
+
```css
|
|
80
|
+
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';
|
|
81
|
+
```
|
|
76
82
|
|
|
77
|
-
###
|
|
83
|
+
### Add the Rich Text Editor component with required modules
|
|
78
84
|
|
|
79
|
-
|
|
85
|
+
Add the Rich Text Editor component to the `src/app/app.ts` file with the basic required modules, `Toolbar`, `Image`, `Link`, `HtmlEditor`, and `QuickToolbar`, provided using the `providers` array, and add the control's HTML elements to the component `template`:
|
|
80
86
|
|
|
81
87
|
```typescript
|
|
82
88
|
import { Component } from '@angular/core';
|
|
83
|
-
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
|
|
89
|
+
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
|
|
90
|
+
|
|
84
91
|
@Component({
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
+
selector: 'app-root',
|
|
93
|
+
imports: [RichTextEditorModule],
|
|
94
|
+
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService],
|
|
95
|
+
template: `<ejs-richtexteditor id="editor" height="300px">
|
|
96
|
+
<ng-template #valueTemplate>
|
|
97
|
+
<p>Start editing your content here.</p>
|
|
98
|
+
</ng-template>
|
|
99
|
+
</ejs-richtexteditor>`
|
|
92
100
|
})
|
|
93
|
-
export class
|
|
101
|
+
export class App {}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
<blockquote>
|
|
105
|
+
<p>ℹ️ <b>Note:</b></p>
|
|
106
|
+
<span>The example above imports only the required services (<code>ToolbarService</code>, <code>LinkService</code>, <code>ImageService</code>, <code>HtmlEditorService</code>, <code>QuickToolbarService</code>) to keep the bundle size small. For detailed information on module injection, refer to the Syncfusion<sup>®</sup> Rich Text Editor Module <a href="https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/module">Documentation</a>.</span>
|
|
107
|
+
</blockquote>
|
|
108
|
+
|
|
109
|
+
### Run the application
|
|
110
|
+
|
|
111
|
+
```sh
|
|
112
|
+
ng serve --open
|
|
94
113
|
```
|
|
95
114
|
|
|
115
|
+
Now, open your project in a browser, and the Rich Text Editor will be displayed! 🚀
|
|
116
|
+
|
|
96
117
|
## 🛠️ Supported frameworks
|
|
97
118
|
|
|
98
119
|
Rich Text Editor component is also offered in following list of frameworks.
|
|
@@ -121,33 +142,33 @@ Rich Text Editor component is also offered in following list of frameworks.
|
|
|
121
142
|
|
|
122
143
|
* [Checklist](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools) - Checklist support enables users to create interactive task lists in the editor. It is useful for organizing work items and tracking progress within content.
|
|
123
144
|
|
|
124
|
-
* [Accessibility & WCAG 2.0 Compliance](https://
|
|
145
|
+
* [Accessibility & WCAG 2.0 Compliance](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/accessibility) - 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.
|
|
125
146
|
|
|
126
|
-
* [Preventing Cross-Site Scripting (XSS)](https://
|
|
147
|
+
* [Preventing Cross-Site Scripting (XSS)](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/validation-security/xhtml-validation#cross-site-scripting-xss-prevention) - 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.
|
|
127
148
|
|
|
128
|
-
* [HTML code editing](https://
|
|
149
|
+
* [HTML code editing](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/editor-value#source-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.
|
|
129
150
|
|
|
130
|
-
* [Markdown editor](https://
|
|
151
|
+
* [Markdown editor](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/editor-types/editor-mode#markdown-editor) - Markdown editor mode lets users create and edit content using Markdown syntax. It is ideal for lightweight authoring and text-based workflows.
|
|
131
152
|
|
|
132
|
-
* [Custom Toolbar Items](https://
|
|
153
|
+
* [Custom Toolbar Items](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/toolbar/?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm#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.
|
|
133
154
|
|
|
134
|
-
* [Quick Toolbar](https://
|
|
155
|
+
* [Quick Toolbar](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/toolbar/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.
|
|
135
156
|
|
|
136
157
|
* [File Browser](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/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.
|
|
137
158
|
|
|
138
|
-
* [Emoji Picker](https://
|
|
159
|
+
* [Emoji Picker](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/smart-editing/emoji-picker) - Emoji picker support lets users insert emojis into the editor content. It helps make messages and content more expressive and engaging.
|
|
139
160
|
|
|
140
161
|
* [Insert Media](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/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.
|
|
141
162
|
|
|
142
|
-
* [Toolbar](https://
|
|
163
|
+
* [Toolbar](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/toolbar/?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm/#toolbar-items) - 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.
|
|
143
164
|
|
|
144
165
|
* [Export and Import](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm/#/tailwind3/rich-text-editor/export-document) - 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.
|
|
145
166
|
|
|
146
|
-
* [Undo and redo](https://
|
|
167
|
+
* [Undo and redo](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/undo-redo) - Undo and redo support lets users reverse or repeat recent editing actions. It improves editing confidence by making changes easier to correct.
|
|
147
168
|
|
|
148
|
-
* [Module injection](https://
|
|
169
|
+
* [Module injection](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm/#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.
|
|
149
170
|
|
|
150
|
-
* [Third-party integration](https://
|
|
171
|
+
* [Third-party integration](https://help.syncfusion.com/rich-text-editor-sdk/angular/rich-text-editor/third-party-integration/?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm) - 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.
|
|
151
172
|
|
|
152
173
|
## 📚 Resources
|
|
153
174
|
|
|
@@ -167,6 +188,47 @@ Product support is available through the following mediums.
|
|
|
167
188
|
* [Request feature or report bug](https://www.syncfusion.com/feedback/angular?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm)
|
|
168
189
|
* Live chat
|
|
169
190
|
|
|
191
|
+
## Other Popular Angular Components
|
|
192
|
+
|
|
193
|
+
Explore other popular Syncfusion<sup>®</sup> Angular components curated from UI components, standalone SDKs, and document solution suites.
|
|
194
|
+
|
|
195
|
+
<table>
|
|
196
|
+
<tr>
|
|
197
|
+
<td align="center">
|
|
198
|
+
<a href="https://www.syncfusion.com/angular-components/angular-data-grid">Angular DataGrid</a>
|
|
199
|
+
</td>
|
|
200
|
+
<td align="center">
|
|
201
|
+
<a href="https://www.syncfusion.com/angular-components/angular-charts">Angular Charts</a>
|
|
202
|
+
</td>
|
|
203
|
+
<td align="center">
|
|
204
|
+
<a href="https://www.syncfusion.com/angular-components/angular-file-manager">Angular File Manager</a>
|
|
205
|
+
</td>
|
|
206
|
+
<td align="center">
|
|
207
|
+
<a href="https://www.syncfusion.com/gantt-sdk/angular-gantt-chart">Angular Gantt Chart</a>
|
|
208
|
+
</td>
|
|
209
|
+
<td align="center">
|
|
210
|
+
<a href="https://www.syncfusion.com/diagram-sdk/angular-diagram">Angular Diagram</a>
|
|
211
|
+
</td>
|
|
212
|
+
</tr>
|
|
213
|
+
<tr>
|
|
214
|
+
<td align="center">
|
|
215
|
+
<a href="https://www.syncfusion.com/scheduler-sdk/angular-scheduler">Angular Scheduler</a>
|
|
216
|
+
</td>
|
|
217
|
+
<td align="center">
|
|
218
|
+
<a href="https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor">Angular DOCX Editor</a>
|
|
219
|
+
</td>
|
|
220
|
+
<td align="center">
|
|
221
|
+
<a href="https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer">Angular PDF Viewer</a>
|
|
222
|
+
</td>
|
|
223
|
+
<td align="center">
|
|
224
|
+
<a href="https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor">Angular Spreadsheet Editor</a>
|
|
225
|
+
</td>
|
|
226
|
+
<td align="center">
|
|
227
|
+
<a href="https://www.syncfusion.com/angular-components/angular-maps-library">Angular Maps</a>
|
|
228
|
+
</td>
|
|
229
|
+
</tr>
|
|
230
|
+
</table>
|
|
231
|
+
|
|
170
232
|
## 🔄 Change log
|
|
171
233
|
|
|
172
234
|
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/richtexteditor/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@syncfusion/ej2-angular-richtexteditor",
|
|
3
|
-
"version": "34.2.
|
|
3
|
+
"version": "34.2.6",
|
|
4
4
|
"description": "Essential JS 2 RichTextEditor component for Angular",
|
|
5
5
|
"author": "Syncfusion Inc.",
|
|
6
6
|
"license": "SEE LICENSE IN license",
|
|
7
7
|
"schematics": "./schematics/collection.json",
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@syncfusion/ej2-base": "~34.2.
|
|
10
|
-
"@syncfusion/ej2-angular-base": "~34.2.
|
|
11
|
-
"@syncfusion/ej2-richtexteditor": "34.2.
|
|
9
|
+
"@syncfusion/ej2-base": "~34.2.6",
|
|
10
|
+
"@syncfusion/ej2-angular-base": "~34.2.6",
|
|
11
|
+
"@syncfusion/ej2-richtexteditor": "34.2.6"
|
|
12
12
|
},
|
|
13
13
|
"keywords": [
|
|
14
14
|
"angular-rich-text-editor",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.pkgName = '@syncfusion/ej2-angular-richtexteditor';
|
|
4
|
-
exports.pkgVer = '^34.2.
|
|
4
|
+
exports.pkgVer = '^34.2.6';
|
|
5
5
|
exports.moduleName = 'RichTextEditorModule';
|
|
6
|
-
exports.themeVer = '~34.2.
|
|
6
|
+
exports.themeVer = '~34.2.6';
|