Troubleshooting
diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/perform-mail-merge-in-document-editor.md b/Document-Processing/Word/Word-Processor/angular/how-to/perform-mail-merge-in-document-editor.md
new file mode 100644
index 0000000000..1d85a168c9
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/angular/how-to/perform-mail-merge-in-document-editor.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: Mail Merge in Angular DOCX Editor | Syncfusion
+description: Learn here to perform mail merge in Syncfusion Angular DOCX Editor component using the Word Library as a dependency
+control: Perform mail merge
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# How to perform mail merge in Angular DOCX Editor
+
+You can perform mail merge in the Angular DOCX Editor (Document Editor) using the following approach:
+
+1. Insert merge fields programmatically using Document Editor APIs.
+
+2. Execute the mail merge on the Word document using the server-side Word Library (DocIO).
+
+3. Finally, view the merged document in the Document Editor.
+
+## Insert merge field
+
+A field can be added to the document by using the [insertField](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#insertfield) method in the [Editor](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor) module.
+
+The following example demonstrates how to insert a merge field programmatically by providing the field code and field result.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+let fieldCode: string = 'MERGEFIELD First Name \\* MERGEFORMAT ';
+let fieldResult: string = '«First Name»';
+container.documenteditor.editor.insertField(fieldCode, fieldResult);
+
+{% endhighlight %}
+{% endtabs %}
+
+For more information about Fields, refer this [page](https://help.syncfusion.com/document-processing/word/word-processor/angular/fields).
+
+## Perform mail merge
+
+Once the necessary merge fields are inserted, the template is ready for mail merge. Perform the mail merge on the template using supported data sources on the server side with DocIO. After the mail merge operation is completed, the merged document can be loaded into the Document Editor for viewing. The Document Editor also supports exporting the mail-merged document to supported formats.
+
+For detailed information about mail merge functionality in DocIO, refer to this [page](https://help.syncfusion.com/document-processing/word/word-library/net/working-with-mail-merge).
+
+## Online demo
+
+Explore how to insert merge fields in the Document Editor and execute the mail merge using DocIO through the live demo provided [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/mail-merge).
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/angular/images/custom-metadata-author-trackchanges.png b/Document-Processing/Word/Word-Processor/angular/images/custom-metadata-author-trackchanges.png
new file mode 100644
index 0000000000..0e15ea706c
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/angular/images/custom-metadata-author-trackchanges.png differ
diff --git a/Document-Processing/Word/Word-Processor/angular/images/filter-changes-by-user.png b/Document-Processing/Word/Word-Processor/angular/images/filter-changes-by-user.png
new file mode 100644
index 0000000000..bc5dd53aea
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/angular/images/filter-changes-by-user.png differ
diff --git a/Document-Processing/Word/Word-Processor/angular/images/spellcheck-dictionary-setup.png b/Document-Processing/Word/Word-Processor/angular/images/spellcheck-dictionary-setup.png
new file mode 100644
index 0000000000..e0b6c48fa0
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/angular/images/spellcheck-dictionary-setup.png differ
diff --git a/Document-Processing/Word/Word-Processor/angular/restrict-editing.md b/Document-Processing/Word/Word-Processor/angular/restrict-editing.md
index 6ff239e998..1841d19416 100644
--- a/Document-Processing/Word/Word-Processor/angular/restrict-editing.md
+++ b/Document-Processing/Word/Word-Processor/angular/restrict-editing.md
@@ -1,44 +1,337 @@
---
layout: post
-title: Restrict editing in Angular Document editor component | Syncfusion
-description: Learn here all about Restrict editing in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
-platform: document-processing
+title: Restrict Editing in Angular DOCX Editor | Syncfusion
+description: Learn how to enable Restrict Editing in the Angular DOCX Editor to securely manage document access and control user modifications.
control: Restrict editing
+platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Restrict Editing in Angular Document editor component
-Document Editor provides support to restrict editing. When the protected document includes range permission, then unique user or user group only authorized to edit separate text area.
+# Restrict Editing in Angular DOCX Editor
+
+Syncfusion® Angular DOCX Editor (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed.
+
+## Configure on client side
+
+Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restricting editing operations.
+
+
+### Read only mode
+
+Document Editor supports protecting a document in read-only mode, where users can only view the content without making changes.
+
+The following example code illustrates how to enforce or remove read-only protection in the Document Editor.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+
+
+
+
+
`
+})
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ sfdt = {"sfdt":"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"};
+
+ onCreated() {
+ this.container.documentEditor.open(JSON.stringify(this.sfdt));
+ }
+
+ enforceProtection(): void {
+ this.container.documentEditor.editor.enforceProtection('123', 'ReadOnly');
+ }
+
+ stopProtection(): void {
+ this.container.documentEditor.editor.stopProtection('123');
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Form filling mode
+
+Document Editor supports protecting a document with form-filling restrictions, allowing users to edit only form fields.
+
+The following example code illustrates how to enforce or remove form-filling restrictions in the Document Editor.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+
+
+
+
+
+ `
+})
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ sfdt = { "sfdt": "UEsDBAoAAAAIAGlfyVyMVz+kgAMAAL0ZAAAEAAAAc2ZkdM1YW2+bMBT+K5H3GlUBEgi8Vd2iPexSbXmYVOXBgB2smsvAbdpGkab91P2S+QYJzaW0TQhRpM/BHJ/P5/t8gliCNGMkJk/oJw4Z8Fh+h/oARj7wMKQF6oMCBcC7WQrMcuAtQbYAnm2YfZBFwHNcPqAxH3DMNTKNvsYoBJ5l9wHWGOIMeAOOKVIDnyjgmcA3tLiGcwT6ACUYeDwcC+TTOSkRSSQ4AZ7BESnM5knBF7jMoU8CHp8EKS3kDPq9kEh9FshQNXMzW/GkcncZFlvzw7wQyDitJZ+jTGE+V+jr35GCewEcC5YI4mkeQ8rzUsFTTgRqVaKLya8QmW37OqOZWALGyOuBVX/XLZhJ6hFGpUxYFHQJRPIpemCGqJncJ+cHgOClkBG5KRkeU1X6ezUlKrpa7U7o36qQ9frVfRXjyfcfX6effk1rU4KpuXtNFfXvz9/N74ENGweoGTVqM3FnmzKeOuGLbrkMwxwVxdsNY57YMGZ3DWMKw8xEcWTJZ5XIVd8j1QgXTzzWEOXj0VeQEj8nvBR3crOF2rMPVbFVf+EhIrsKEqONMBisV8awNoV5q0MbVzjxdxmMkkR3TIVYI1Nk/UICVKB7JdUbSmnVmjXbW5G1HC+SarwISn+tHYwLzYhhqgYhW6jur1sw0l090sYqSoPFKn+mIIyYdiDGimCQxpmu/CPzNUtRByD+Pj5M5AfI4/Uoz0/tkOnF31fV5+c0eVinEP4TGT8jGJJk3jOOlfRFKcV/8qaWFwPHNWzbHg0cxxy4Q6currHd4pTT7brTe1/IPGJCGVlfczIaujZ4Zt71TXUL6+vqf3aj1W0WqHcVwRy8UMXyJnWM26H7EWF4R1nvGuZwnsMs6k3ShFXc9kzXOK6eb8RszQ6vc4O5zw1Wu24wm7jB3O8G61xuKLlZHRXY2iewebBixsRybOuIAltNBLb2C3w6ug0FHnZU4OG2wGT94NfeCR42EXi4S+BT020o8KijAo92nOAWdR010XW08+CeVU67o3Lar5Lz6H3YbiKn/Uo5W2i/TkfldN7Wfo+uq9NEV+et7bcFgccdFXi87wFqcDE6WDNLfo4o8biJxOP9j1CnJNxQZLejIruHTvF51HabqO0ePtBdkB3lx9F89+uq7ZcytYLK2mkWJalJmrLzk9IsxCtIKl8r88WowiBWmOufDwpJPC/ksv8BUEsBAhQACgAAAAgAaV/JXIxXP6SAAwAAvRkAAAQAAAAAAAAAAAAAAAAAAAAAAHNmZHRQSwUGAAAAAAEAAQAyAAAAogMAAAAA" };
+
+ onCreated() {
+ this.container.documentEditor.open(JSON.stringify(this.sfdt));
+ }
+
+ enforceProtection(): void {
+ this.container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
+ }
+
+ stopProtection(): void {
+ this.container.documentEditor.editor.stopProtection('123');
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Comments only mode
+
+Document Editor supports protecting a document in comments-only mode, allowing users to add or edit comments only.
+
+The following example code illustrates how to enforce and remove comments-only protection in the Document Editor.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+
+
+
+
+
+ `
+})
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ sfdt = {"sfdt":"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"};
+
+ onCreated() {
+ this.container.documentEditor.open(JSON.stringify(this.sfdt));
+ }
+
+ enforceProtection(): void {
+ this.container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
+ }
+
+ stopProtection(): void {
+ this.container.documentEditor.editor.stopProtection('123');
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Track changes only mode
+
+Document Editor supports protecting a document in revisions-only mode, allowing users to view the document and make corrections while tracking all changes. Users cannot accept or reject tracked changes; only the author can review and finalize them later.
+
+The following example code illustrates how to enforce and remove revisions-only protection in the Document Editor.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+
+
+
+
+
+ `
+})
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ sfdt = {"sfdt":"UEsDBAoAAAAIAMBmyVzPkjTQFwcAAJcpAAAEAAAAc2ZkdO1aS28bNxD+K4vtVQj0ft3qV5zEdozYSREkPlArrpYW99El145iGCiSUy8FCqRFDw3QWw9F0QAN0KCX/hgDDtr0R3SGpKRdWVLkWJUcIDLgITl8zHxDfuRy98QOI8l89pTuuW1pN2Wc0JxNvJbddAkXNGcL6tjNRycoo9huntjRsd2sFoo5O/LsZq0BCe5DAmRspDSyZaTXtpulas52jWy7kd3MgwypTrSYFjCSvUOPd0mH2jmbBq7dhOYuSlDHrC+pkswN7GYBJNUy6gQCOvg8Ji3mQPvACblQGvrlsZK8JR3VVGseHZzCoMq7yEXXWu1YoJRg1gnouNQy7mjZMnlPiyMUWIyj1AE2kCXoXUgwyN6kpM2CjlUAUziaruo6aiBXPNVNXMjaq4SzVsygHpQjFlqDqbTOJSP5wKUjJZkCGI0p5xY7puQRRqF9RAOZxNT6Ioy7wlrtOZwK+xQgvyLaLgv0NEK4q320d8LYJ3wi1MWhn8WxuIxUmOZEzpIetVzmSCZZmAjLCf2IBD0rDKxjjzme0o+2FcSPOLXaRJIWEVRYBFSYaucsBjmLk7hDc5afcMkCAj0HhFs+CRKXONAPTiUz0A2E8QCAUfZ7Csurz+LpOBrQDjCAtrv4IekS3KRL8NONlhHPaOGenuIETi/AgiGmfebD4oBdwLoXwuxPEVRhQFAX67C2qpIvVjCNqVIJU0hOOq2pbEzvhtLGacYqwIkrQcSRv9Q2pqVrpCR6ExRKEC3MBsaFVNmQD/ZLsz13cdR++jgYpI+d/mY+jIErjEXS5Wh4HygoactjTapmg6Rmz/XAahuwEEa6vjYk0qLtSV+b5LraUqQoVSBkT7a0Tnq+jrNjBM6Ruy4wKG7zPjl0hVZwNQFRy4EAMQZyuLdYW6zjSShDZs4X8xv5EvzHv7JKlW3cWrAxJbPUcsTUWjA9XYTLvg2UC7XO37w5e/b67NkfZ8+fnz37bWDNJgkg3va7n7/99+VX1j+///TuxXe6GA8jb3/9+u2ff6Uro0fn3796+/rV+Q/f/P3LCyjFE8vYGbhJW/FYxb5HcB18HnQECQiqoHBdeli40yMcAVihyrAHMM/amL+ZHGJne16cSNy573g+5rfDkK+Eser2DtaE8ZKgo1vECWTvEXKEDVa1S+tJ5FGfYYVVj2IXuxzcgjNbQKWFRWGXYmAfMob2bDMnDkXoSushs1YIU4PvM1wdKd0mA8YgPaKdQyu2H1grIcfKa/RIFQDSilX2KUe7bpJEEl/1RnAW2ltEetjBXi/Gk+S6kOBWh/LQWm9TIVB1N+5hV3dgSmkft3nPVwWxZF0s2CJhCAVrYXfVgy1b9ccCWMP2LdEFrIi1G0rVMlT4ogAzSTDw7QGjcmzU7sMsyDiNBUmMSNNQxabHXUIDNSX8QJ1lmfJ4JekglFuUcnJM2pRa929hcRiFmQ5vexD0TYpW3CYKNBQBFdTap09wBm4xgdjt0U5oOtnu6XnQI4FP4n69na6CYR0Wnq+A404XJxdDZie65V3hk3SdXY8gIihEZAIRTAgEqA4nq+gkFUzUUSv2CacZEPYJcAXVmiSjwWAobaLUrgqgMR8J0mfBTFSUJo7KTCRUmYmEKjOQELDG+Y8vZySe91FOf34ZoulnDb2shnGbXY1d1kgS7FJYPp/IZa7k0o/UJ0q51pSibgfwOGjjnPlsw/xsdVLuDShmcF42h6urHC/x4Fg3B8cbhXIDf7VqoVIvlIvDg+SFp+SRO4F5XAQET4au9fkufSkyB2fVzUtRn4sLk579q9krj8FhzFUxKa7XyisViMnwQaM6CsCwSRqGVGkGjFT5mOL3AFOcHzDF/izI1xqFarVayddqxXyjXMs+TxQn4VaajttGpdyoZnArLRG30sJxK027a5qMW2GjVKuWMrgVl4hbeeG4lS/ixvrPqrPNN9ZKNVgSbpWF41aZztpTlueyMKouHKPqpTBKL8VFY7RGXZJwae2SmHRiEnnWRhhIDVihf112YXOAEzCJs5WuK1m3Jjt5gbsnu3XtuPQSbpXHuXVNqe4SblXGRmv5THQJF6qXdGFRRDGjCzSeD7EaqoS+zM0/8GwJtue2vsGVh4p3JV7iqrd2sHdX6xl1pa8+SF3xK7ozdmbNHgu7QjhvfjOisBGG8mNAwdiZNXtuKMCDd0o3LzTM21VHXHyBkPFtZPTRNVaboz3T35YUs29L3nNEqH3Y8VNTwCVXugnj8HVYGp/+NJh2gqp96BZyFXNnJNH6NQ1wfdJzWf5GZSpmJfWbY4jrs4S4Pvnw838aPGOQG9c0yI1pq3g50W7MEu3G9AW9tLAfIJ74ah6iwLV0fC1jk32iJfM7QgcXP786scXVPxoY/657pk8JTgY5/cXO48cJ7J8l84GMcx2NK/eNCxb7McunaH000Tr9D1BLAQIUAAoAAAAIAMBmyVzPkjTQFwcAAJcpAAAEAAAAAAAAAAAAAAAAAAAAAABzZmR0UEsFBgAAAAABAAEAMgAAADkHAAAAAA=="}
+
+ onCreated() {
+ this.container.documentEditor.open(JSON.stringify(this.sfdt));
+ }
+
+ enforceProtection(): void {
+ this.container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly');
+ }
+
+ stopProtection(): void {
+ this.container.documentEditor.editor.stopProtection('123');
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Format restrictions
+
+Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+this.container.documentEditor.editor.enforceProtection('password', true, true);
+
+{% endhighlight %}
+{% endtabs %}
+
+## Configure on server side
+
+The above-mentioned hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service as shown below.
+
+The Document Editor client requires a server-side API to generate a hash from the specified password and salt values, which is necessary for the restrict editing functionality.
+
+For more information on configuring restrict editing on the server side, refer to the following:
+
+- [Web Service for Restrict editing in ASP.NET Core ](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/core#restrict-editing)
+
+- [Web Service for Restrict editing in ASP.NET MVC ](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/mvc#restrict-editing)
+
+- [Web Service for Restrict editing in Java ](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/java#restrict-editing)
## Set current user
-You can use the `currentUser` property to authorize the current document user by name, email, or user group name.
+The [currentUser](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documenteditor#currentuser) property can be used to authorize the current document user by name, email, or user group.
+
+The following code example demonstrates how to set the currentUser.
-The following code shows how to set currentUser
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
-```typescript
this.container.documentEditor.currentUser = 'engineer@mycompany.com';
-```
+
+{% endhighlight %}
+{% endtabs %}
## Highlighting the text area
-You can highlight the editable region of the current user using the `userColor` property.
+The [userColor](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user.
+
+The following code example demonstrates how to set the userColor.
-The following code shows how to set userColor.
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
-```typescript
this.container.documentEditor.userColor = '#fff000';
-```
-You can toggle the highlight the editable region value using the "highlightEditableRanges" property.
+{% endhighlight %}
+{% endtabs %}
+
+The [highlightEditableRanges](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions.
+
+The following code example demonstrates how to enable or disable editable region highlighting.
-The following code shows how to toggle the highlight editable region value.
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+this.container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
-```typescript
-container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
-```
+{% endhighlight %}
+{% endtabs %}
## Restrict Editing Pane
@@ -64,14 +357,8 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p
{% previewsample "/document-processing/samples/document-editor/angular/document-editor-container-cs1" %}
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
+N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
## Online Demo
-Explore how to restrict editing and protect Word documents in the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/document-protection).
-
-## See Also
-
-* [How to protect the document in form filling mode](./form-fields#protect-the-document-in-form-filling-mode)
-* [How to protect the document in comments only mode](./comments#protect-the-document-in-comments-only-mode)
-* [How to protect the document in track changes only mode](./track-changes#protect-the-document-in-track-changes-only-mode)
\ No newline at end of file
+Explore how to restrict editing and protect Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/document-protection).
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/angular/spell-check.md b/Document-Processing/Word/Word-Processor/angular/spell-check.md
index 8cd8f7e2b1..6aca5bed3f 100644
--- a/Document-Processing/Word/Word-Processor/angular/spell-check.md
+++ b/Document-Processing/Word/Word-Processor/angular/spell-check.md
@@ -1,165 +1,213 @@
---
layout: post
-title: Spell check in Angular Document editor component | Syncfusion
-description: Learn here all about Spell check in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
-platform: document-processing
+title: Spell check in Angular DOCX Editor | Syncfusion
+description: Learn how to use Spell check in the Angular DOCX Editor to detect and correct errors seamlessly- without relying on Microsoft Word.
control: Spell check
+platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Spell check in Angular Document editor component
+# Spell Check in Angular DOCX Editor
-Document Editor supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor's spell checker is compatible with [hunspell dictionary files](https://github.com/wooorm/dictionaries).
+Syncfusion® Angular DOCX Editor (Document Editor) supports spell checking for document content. It identifies misspelled words and provides suggestions through a dialog and the context menu. The spell checker is compatible with [Hunspell](https://github.com/wooorm/dictionaries) dictionary files.
-```typescript
-import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
-import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';
+## Features
+
+* Supports context menu suggestions for misspelled words.
+
+* Provides options such as Ignore, Ignore All, Change, and Change All in the spell check dialog.
+
+## Configure spell check in Angular DOCX Editor
+
+Spell checking is enabled using the [enableSpellCheck](https://ej2.syncfusion.com/documentation/api/document-editor-container/index-default#enablespellcheck) property and by configuring the spellChecker settings. A server-side service is required to process text, detect misspelled words, and provide suggestions for display in the editor.
+
+### Client-side configuration
+
+Spell check can be enabled in the Document Editor using the [enableSpellCheck](https://ej2.syncfusion.com/documentation/api/document-editor-container/index-default#enablespellcheck) property. Configure the spell check settings with a valid service URL and language ID to enable spelling validation and suggestions.
+
+The following code example demonstrates how to enable spell check and configure basic spell checker settings:
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+import { SpellChecker } from '@syncfusion/ej2-documenteditor';
@Component({
- selector: 'app-container',
- // specifies the template string for the DocumentEditorContainer component
- template: ``,
- providers: [ToolbarService]
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+
+
+ `
})
-export class AppComponent {
- @ViewChild('document_editor')
- public container: DocumentEditorContainerComponent;
- onCreated() {
- //Specifies the language id to map server side dictionary.
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ onCreated() {
+ // set the language ID for spell checker. Here, 1033 is the language ID for English (United States).
this.container.documentEditor.spellChecker.languageID = 1033;
+ // remove the underline for misspelled words.
this.container.documentEditor.spellChecker.removeUnderline = false;
+ // Allow suggestion for misspelled word
this.container.documentEditor.spellChecker.allowSpellCheckAndSuggestion = true;
}
}
-```
-## Features
+{% endhighlight %}
+{% endtabs %}
+
+### Server-side configuration
-* Supports context menu suggestions.
-* Provides built-in options to Ignore, Ignore All, Change, Change All for error words in spell checker dialog.
+The above-mentioned hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service as shown below.
-## Enable SpellCheck
+The Document Editor client requires a server-side API to process text, identify misspelled words, and provide suggestions in the context menu. The server returns a JSON response containing details about misspelled words and their suggestions.
-To enable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#enablespellcheck) property as `true` and then configure SpellCheckSettings.
+For more information on configuring the spell check service, refer to the following:
-## Disable SpellCheck
+- [Web Service for Spell Check in ASP.NET Core](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/core#spell-check)
-To disable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#enablespellcheck) property initialization code. The default value of this property is false.
+- [Web Service for Spell Check in ASP.NET MVC](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/mvc#spell-check)
+
+- [Web Service for Spell Check in Java](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/java#spell-check)
## Spell check settings
-### Remove Underline
+### Allow suggestions
+
+By default, the Document Editor retrieves both spelling errors and suggestions for misspelled words, allowing users to correct them through context menu options. This behavior can be modified using the [allowSpellCheckAndSuggestion](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellchecker#allowspellcheckandsuggestion) API to perform only spell checking without fetching suggestions.
-By default, mis-spelled words are marked with squiggly line. You can also disable this behavior by enabling the [`removeUnderline`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellChecker#removeunderline) API and now, the squiggly lines will never be rendered for mis-spelled words.
+The following code example demonstrates how to enable spell check suggestions.
```typescript
-this.container.documentEditor.spellChecker.removeUnderline = false;
+
+this.container.documentEditor.spellChecker.allowSpellCheckAndSuggestion = false;
+
```
-### AllowSpellCheckAndSuggestion
+### Remove underline
+
+By default, misspelled words are marked with a squiggly line. This behavior can be disabled using the [removeUnderline](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellchecker#get-removeunderline-boolean) API, which prevents squiggly lines from being rendered for misspelled words.
-By default, on performing spell check in Document Editor, both spelling and suggestions of the mis-spelled words will be retrieved, and this mis-spelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check.
+The following code example demonstrates how to configure this behavior.
```typescript
-this.container.documentEditor.spellChecker.allowSpellCheckAndSuggestion = false;
+
+this.container.documentEditor.spellChecker.removeUnderline = false;
+
```
-### LanguageID
+### Language configuration
+
+The Document Editor supports multi-language spell checking. Multiple languages (dictionaries) can be added on the server side, and the language used for spell checking must match the [languageID](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellchecker#get-languageid-number) specified in the Document Editor.
-Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) in the server-side and to use that language for spell checking in Document Editor, it must be matched with [`languageID`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellChecker#languageid) you pass in the Document Editor.
+The following code example demonstrates how to configure the languageID.
```typescript
+
this.container.documentEditor.spellChecker.languageID = 1033; //LCID of "en-us";
+
```
-### EnableOptimizedSpellCheck
+### Add new word to dictionary
-Document Editor provides option to spellcheck page by page when loading the documents. The default value of this property is false, so when opening the document spellcheck web API will be called for each word in the document. To optimize the frequency of spellcheck web API calls, you can enable this property.
+If a root word is missing from the dictionary file, it can be added along with rules to generate possible word forms using the AddNewWord API in the server-side spell check library.
-The following code example illustrates how to enable optimized spell checking.
+N> Rules are automatically generated based on the root word, possible words, and affix file. Passing null for the affPath and possibleWords parameters adds only the root word to the dictionary.
-```typescript
-this.container.documentEditor.spellChecker.enableOptimizedSpellCheck = true;
-```
+The following server-side example demonstrates how to add a new root word along with rules to generate possible word forms:
-### Spell check dictionary cache
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
-Starting from `v20.1.0.xx`, we have optimized the performance and memory usage of spell checker by adding a static method to initialize the dictionaries with specified cache count.
+SpellChecker spellChecker = new SpellChecker();
-By default, the spell checker holds only one language dictionary in memory. If you want to hold multiple dictionaries in memory, you need to set the cache limit by using `InitializeDictionaries` method as in the below example.
+// Adds the specified new root word to the dictionary along with the rule to form the possible words.
+spellChecker.AddNewWord("en.dic", "en.aff", "construct", new string[] { "constructs", "reconstruct", "constructed", "constructive" });
-```csharp
- List spellDictCollection = new List();
- string personalDictPath = string.Empty;
- int cacheCount = 2;
- // Initialize dictionaries
- SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount);
-```
+{% endhighlight %}
+{% endtabs %}
-If dictionaries are initialized using `InitializeDictionaries` method, then we should use default constructor of the `SpellChecker`to check spelling and get suggestion as in the below example code, it will prevent reinitialization of already loaded dictionaries.
-
-```csharp
-public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
-{
- try
- {
- SpellChecker spellCheck = new SpellChecker();
- spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
- return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- }
- catch
- {
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
-}
-```
+### Dictionary cache
-Previously on every `SpellChecker.GetSuggestion()` method call, the `.aff` and dictionary data will be parsed to generate suggestion for miss spelled word. But, starting from `v20.1.0.xx`, the `.aff` and dictionary data will be parsed only for the first time alone while calling `SpellChecker.GetSuggestion()` method.
+To improve performance, dictionary data can be cached on the **server side** using the InitializeDictionaries method. This avoids reloading dictionary files for every spell check request and reduces processing time.
-### Add new root word and possible words to dictionary
+By default, only one dictionary is cached. Multiple dictionaries can be maintained by increasing the cache count as shown below:
-If you find any root word is missing in the dictionary file, then you can add that new root word and the rule to form the possible words to dictionary file using `AddNewWord` API in the server-side Spell check library.
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
->Note:
->1. The rules are framed automatically using the root word, the possible words and affix file.
->2. If you pass null for the parameters `affPath` and `possibleWords`, then it will add a single root word to dictionary.
->3. This API is included starting from `v20.2.0.xx`.
+List spellDictCollection = new List();
+string personalDictPath = string.Empty;
+int cacheCount = 2;
+// Initialize dictionaries
+SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount);
-The following code example demonstrates how to add a new root word to the dictionary along with the rule to form the possible words.
+{% endhighlight %}
+{% endtabs %}
+
+If dictionaries are initialized using the InitializeDictionaries method, the default constructor of the SpellChecker should be used to perform spell checks and retrieve suggestions. This approach prevents the reinitialization of already loaded dictionaries.
+
+To write a Web API for word-by-word spell checking, refer to the [link](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/core#spell-check-word-by-word).
+
+
+### Optimized spell check
+
+The Document Editor provides an option to perform spell checking page by page when loading documents. By default, this property is set to false, so the spell check web API is called for each word in the document. To optimize the frequency of spell check API calls, you can enable the [enableOptimizedSpellCheck](https://ej2.syncfusion.com/angular/documentation/api/document-editor/spellchecker#get-enableoptimizedspellcheck-boolean) property.
+
+The following code example illustrates how to enable optimized spell checking.
+
+```typescript
+
+this.container.documentEditor.spellChecker.enableOptimizedSpellCheck = true;
-```csharp
-SpellChecker spellChecker = new SpellChecker();
-// Adds the specified new root word to the dictionary along with the rule to form the possible words.
-spellChecker.AddNewWord("en.dic","en.aff", "construct", new string[] { "constructs", "reconstruct", "constructed", "constructive" });
```
## Context menu
-Right click on error word to open the context menu with spell check options. Please see below screenshot for your reference.
-
-
+Right-click on an error word to open the context menu with spell check options. See the screenshot below for reference.
-### Suggestions
+### More suggestions
-Context menu shows the suggestions for mis-spelled words. By clicking on the required word from suggestion, the error word gets replaced automatically.
+The context menu shows suggestions for misspelled words. By clicking the required word from the suggestions, the error word is replaced automatically.
-### Add To Dictionary
+### Add to dictionary
-Using this option, you can add the current word to the dictionary. So that the spell checker does not consider that word as error in future.
+This option allows the current word to be added to the dictionary. As a result, the spell checker will not treat the word as an error in the future
### Ignore Once and Ignore All
-If you do not wish to add the word to dictionary and do not want to show error, use Ignore Once or Ignore All options.
+If the word should not be added to the dictionary and should not be marked as an error, the Ignore Once or Ignore All options can be used.
-Ignore: ignore only the current occurrence of a word from error.
+**Ignore**: Ignores only the current occurrence of a word.
-Ignore All: ignore all occurrence of a word from error in the entire document.
+**Ignore All:** Ignores all occurrences of a word in the entire document.
### Spelling
-Using this option, you can open spell check dialog. Please see below screenshot for your reference.
+This option allows the spell check dialog to be opened. Refer to the following screenshot for additional details.
-
+## Spelling in status bar
-* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/core#spell-check) link for configuring spell checker in server-side.
\ No newline at end of file
+The Spelling option is available in the status bar once spell check is enabled. It allows you to enable or disable spell check and control underline behavior directly from the status bar.
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/angular/track-changes.md b/Document-Processing/Word/Word-Processor/angular/track-changes.md
index 9d33acdd6a..1e1ceb7ab7 100644
--- a/Document-Processing/Word/Word-Processor/angular/track-changes.md
+++ b/Document-Processing/Word/Word-Processor/angular/track-changes.md
@@ -1,78 +1,208 @@
---
layout: post
-title: Track changes in Angular Document editor component | Syncfusion
-description: Learn here all about Track changes in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
-platform: document-processing
+title: Track Changes in Angular DOCX Editor | Syncfusion
+description: Learn how to enable Track Changes in Angular DOCX Editor and manage document revisions by accepting or rejecting edits made by multiple reviewers.
control: Track changes
+platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Track changes in Angular Document editor component
+# Track Change in Angular DOCX Editor
-Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If track changes option is enabled, all editing operations are preserved as revisions in Document Editor.
+Syncfusion® Angular DOCX Editor (Document Editor) supports Track Changes functionality, which allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject these modifications. It is a useful tool for managing changes made by several reviewers to the same document. When the Track Changes option is enabled, all editing operations are preserved as revisions in the Document Editor.
-## Enable track changes in Document Editor
+## Enable Track changes
+
+Track Changes can be enabled using the [enableTrackChanges](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#enabletrackchanges) property. When enabled, all editing operations are recorded and preserved as revisions in the Document Editor.
The following example demonstrates how to enable track changes.
-```
-
-```
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
->Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set [enableTrackChanges] = true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes during the document change event. The following example demonstrates how to enable Track changes for the all the Document while Opening.
+import { Component } from '@angular/core';
+import {
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
-```typescript
-
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+ `
+})
+export class App {}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set enableTrackChanges: true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes in documentChange event.
+
+The following example demonstrates how to enable track changes for the all the document while opening.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+
+
+
onDocumentChange(): void {
if (this.container !== null) {
this.container.documentEditor.enableTrackChanges = true;
}
}
-```
+
+{% endhighlight %}
+{% endtabs %}
+
+## Show or hide revisions pane
+
+The Show or Hide Revisions Pane in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document.
+
+The following example code illustrates how to show or hide the revisions pane.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [DocumentEditorContainerModule],
+ providers: [ToolbarService],
+ template: `
+
+
+
+
+
+
+
+ `
+})
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ onCreated(): void {
+ // Example: initially hide revisions pane
+ this.container.documentEditor.showRevisions = false;
+ }
+
+ showRevisions(): void {
+ this.container.documentEditor.showRevisions = true;
+ }
+
+ hideRevisions(): void {
+ this.container.documentEditor.showRevisions = false;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
## Get all tracked revisions
-The following example demonstrate how to get all tracked revision from current document.
+Retrieves all tracked revisions from the current document using the revisions collection in the Document Editor.
+
+The following example demonstrates how to get all tracked revisions from the current document.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+
+
-```typescript
/**
* Get revisions from the current document
*/
-let revisions : RevisionCollection = this.documentEditor.revisions;
-```
+const revisions = this.container.documentEditor.revisions;
+
+{% endhighlight %}
+{% endtabs %}
+
+## Accept or reject all changes
+
+Handles all tracked changes in the document at once, either by accepting or rejecting them. This helps quickly finalize or discard edits without reviewing each change individually.
-## Accept or Reject all changes programmatically
+The following example demonstrates how to accept or reject all changes.
-The following example demonstrates how to accept/reject all changes.
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+
+
-```typescript
/**
* Get revisions from the current document
*/
-let revisions : RevisionCollection = this.documentEditor.revisions;
-
+const revisions = this.container.documentEditor.revisions;
/**
* Accept all tracked changes
*/
revisions.acceptAll();
-
/**
* Reject all tracked changes
*/
revisions.rejectAll();
-```
+
+{% endhighlight %}
+{% endtabs %}
## Accept or reject a specific revision
-The following example demonstrates how to accept/reject specific revision in the Document Editor.
+Applies changes to a specific tracked revision in the document, allowing precise control to accept or reject individual edits.
+
+The following example demonstrates how to accept or reject a specific revision in the Document Editor.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
-```typescript
/**
* Get revisions from the current document
*/
-let revisions : RevisionCollection = this.documentEditor.revisions;
+const revisions = this.container.documentEditor.revisions;
/**
* Accept specific changes
*/
@@ -81,158 +211,131 @@ revisions.get(0).accept();
* Reject specific changes
*/
revisions.get(1).reject();
-```
+
+{% endhighlight %}
+{% endtabs %}
## Navigate between the tracked changes
-The following example demonstrates how to navigate tracked revision programmatically.
+Navigates through tracked changes in the document programmatically, enabling easy movement to the next or previous revision from the current selection.
+
+The following example demonstrates how to navigate through tracked revisions programmatically.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
-```typescript
/**
* Navigate to next tracked change from the current selection.
*/
-this.documentEditor.selection.navigateNextRevision();
-
+this.container.documentEditor.selection.navigateNextRevision();
/**
* Navigate to previous tracked change from the current selection.
*/
-this.documentEditor.selection.navigatePreviousRevision();
-```
-
-## Filtering changes based on user
+this.container.documentEditor.selection.navigatePreviousRevision();
-In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user.
-
-
+{% endhighlight %}
+{% endtabs %}
## Custom metadata along with author
-The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property.
+The Document Editor allows customizing revisions using [revisionSettings](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [customData](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#customdata) property allows attaching additional metadata to tracked revisions. This metadata can represent roles, tags, or any custom identifier for a revision. To display this metadata along with the author name in the Track Changes pane, the [showCustomDataWithAuthor](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property must be enabled.
+
+The following example illustrates how to enable and update custom metadata for track changes revisions.
-The following example code illustrates how to enable and update custom metadata for track changes revisions.
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
-```ts
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
import {
- ToolbarService,
DocumentEditorContainerComponent,
+ DocumentEditorContainerModule,
+ ToolbarService
} from '@syncfusion/ej2-angular-documenteditor';
-import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';
+
@Component({
- selector: 'app-container',
+ selector: 'app-root',
standalone: true,
imports: [DocumentEditorContainerModule],
providers: [ToolbarService],
- template: `
+ template: `
+
+
- `,
+ `
})
-export class AppComponent implements OnInit {
- @ViewChild('documenteditor_default')
- public container?: DocumentEditorContainerComponent;
- public Settings = {
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
+
+ public settings = {
revisionSettings: {
customData: 'Developer',
- showCustomDataWithAuthor: true,
- }};
- ngOnInit(): void {}
+ showCustomDataWithAuthor: true
+ }
+ };
}
-```
-The Track Changes pane will display the author name along with the custom metadata, as shown in the screenshot below.
-
+{% endhighlight %}
+{% endtabs %}
->Note:
-* When you export the document as SFDT, the customData value is stored in the revision collection. When you reopen the SFDT, the custom data is automatically restored and displayed in the Track Changes pane.
-* Other than SFDT export (e.g. DOCX and other), the customData is not preserved, as it is specific to the Document Editor component.
-
-## Protect the document in track changes only mode
-
-Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, all the users are allowed to view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes.
-
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#stopprotection) API.
-
-The following example code illustrates how to enforce and stop protection in Document editor container.
-
-```typescript
-import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
-import { DocumentEditorContainerComponent, ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the Document Editor component
- template: `
-
-
`,
- encapsulation: ViewEncapsulation.None,
- providers: [ToolbarService]
-})
-export class AppComponent {
- @ViewChild('document_editor')
- public container: DocumentEditorContainerComponent;
-
- public protectDocument(): void {
- //enforce protection
- container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly');
- }
-
- public unProtectDocument(): void {
- //stop the document protection
- container.documentEditor.editor.stopProtection('123');
- }
-}
-```
+The Track Changes pane will display the author name along with the custom metadata, as shown in the screenshot below.
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
+
-Tracked changes only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane)
+N> When the document is exported as SFDT, the customData value is stored in the revision collection. Upon reopening the SFDT, the custom data is automatically restored and displayed in the Track Changes pane.In formats other than SFDT (such as DOCX and others), the customData is not preserved, as it is specific to the Document Editor component
-
+## Restrict accept or reject by author
->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly |RevisionsOnly`. In stop protection method, parameter denotes the password.
+Accepting or rejecting changes can be restricted based on the author’s name.
-## Event
+The following example demonstrates how to restrict an author from accept or reject changes.
-You can restrict the accept and reject changes based on the author name. The following example demonstrates how to restrict an author from accept/reject changes.
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
-```typescript
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
import {
- ToolbarService,
DocumentEditorContainerComponent,
-} from '@syncfusion/ej2-angular-documenteditor';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations';
-import {
- CustomToolbarItemModel,
DocumentEditorContainerModule,
+ ToolbarService
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
- selector: 'app-container',
+ selector: 'app-root',
standalone: true,
imports: [DocumentEditorContainerModule],
providers: [ToolbarService],
template: `
-
-
- `,
+
+
+
+
+
+ `
})
-export class AppComponent implements OnInit {
- @ViewChild('documenteditor_default')
- public container?: DocumentEditorContainerComponent;
+export class App {
+
+ @ViewChild('container')
+ public container!: DocumentEditorContainerComponent;
- ngOnInit(): void {}
- beforeAcceptRejectChanges(args: { author: string; cancel: boolean }) {
+ // Event gets triggered before accepting/rejecting changes
+ beforeAcceptRejectChanges(args: any): void {
// Check the author of the revision
if (args.author !== 'Hary') {
// Cancel the accept/reject action
@@ -240,8 +343,22 @@ export class AppComponent implements OnInit {
}
}
}
-```
+
+{% endhighlight %}
+{% endtabs %}
+
+## Filter Changes by User
+
+In the Document Editor, a built-in review panel is available that supports filtering changes based on the user.
+
+
## Online Demo
-Explore how to track and review changes in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/track-changes).
\ No newline at end of file
+Explore how to track and review changes in Word documents using the Angular Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/track-changes).
+
+## Video tutorial
+
+To learn more about Track Changes in the Document Editor component, refer to the video below.
+
+{% youtube "https://www.youtube.com/watch?v=Ke27Mip4bN0" %}
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/angular/web-services/core.md b/Document-Processing/Word/Word-Processor/angular/web-services/core.md
index b7597be627..4d9d712644 100644
--- a/Document-Processing/Word/Word-Processor/angular/web-services/core.md
+++ b/Document-Processing/Word/Word-Processor/angular/web-services/core.md
@@ -56,7 +56,7 @@ The following example code illustrates how to write a Web API for importing Word
The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`.
+>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or TIFF format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`.
The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document.
@@ -225,134 +225,178 @@ The following example code illustrates how to write a Web API for restrict editi
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("RestrictEditing")]
- public string[] RestrictEditing([FromBody]CustomRestrictParameter param)
+ public string[] RestrictEditing([FromBody] CustomRestrictParameter param)
{
- if (param.passwordBase64 == "" && param.passwordBase64 == null)
+ if (param.passwordBase64 == "" || param.passwordBase64 == null)
return null;
- return WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount);
+ return WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid);
}
-
public class CustomRestrictParameter
{
public string passwordBase64 { get; set; }
public string saltBase64 { get; set; }
public int spinCount { get; set; }
+ public string algorithmSid { get; set; }
}
```
## Spell Check
-Document Editor supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor client-side script requires this Web API to show error words and list suggestions in context menu. This Web API returns the json type of spell-checked word which contains details about error words if any and suggestions.
+Document Editor supports spell checking for input text. It identifies misspelled words and provides suggestions through a dialog and the context menu. The Document Editor client-side script requires this Web API to display error words and suggestions. This Web API returns a JSON response containing details about misspelled words and their suggestions.
-To know more about configure spell check, please check this [link](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices).
+### Dictionary setup
-In startup.cs file, you can configure the spell check files like below:
+The Document Editor performs spell checking using [Hunspell dictionary files](https://github.com/wooorm/dictionaries). These dictionaries can be obtained from their respective sources.
-```csharp
- public Startup(IConfiguration configuration, IHostingEnvironment env)
+To set up spell checking, place the required dictionary files, including the .dic, .aff, and JSON configuration file, inside the `App_Data` folder in your project. To support a personal dictionary, place an empty .dic file in the same `App_Data` folder.
+
+Refer to the following screenshot for the folder structure.
+
+
+
+The JSON file should contain the configuration details in the following format:
+
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
+
+[
+ {
+ "LanguadeID": 1033,
+ "DictionaryPath": "en_US.dic",
+ "AffixPath": "en_US.aff",
+ "PersonalDictPath": "customDict.dic"
+ }
+]
+
+{% endhighlight %}
+{% endtabs %}
+
+### Configure spell check service
+
+- Add the [Syncfusion.EJ2.SpellChecker.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.SpellChecker.AspNet.Core/) NuGet package to your project.
+
+- In the `Startup.cs` file, configure the spell check files as shown below:
+
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
+
+public Startup(IConfiguration configuration, IWebHostEnvironment env)
+{
+ var builder = new ConfigurationBuilder()
+ .SetBasePath(env.ContentRootPath)
+ .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
+ .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
+ .AddEnvironmentVariables();
+
+ Configuration = builder.Build();
+
+ path = Configuration["SPELLCHECK_DICTIONARY_PATH"];
+ string jsonFileName = Configuration["SPELLCHECK_JSON_FILENAME"];
+ //check the spell check dictionary path environment variable value and assign default data folder
+ //if it is null.
+ path = string.IsNullOrEmpty(path) ? Path.Combine(env.ContentRootPath, "App_Data") : Path.Combine(env.ContentRootPath, path);
+ //Set the default spellcheck.json file if the json filename is empty.
+ jsonFileName = string.IsNullOrEmpty(jsonFileName) ? Path.Combine(path, "spellcheck.json") : Path.Combine(path, jsonFileName);
+ if (File.Exists(jsonFileName))
{
- var builder = new ConfigurationBuilder()
- .SetBasePath(env.ContentRootPath)
- .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
- .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
- .AddEnvironmentVariables();
-
- Configuration = builder.Build();
- _contentRootPath = env.ContentRootPath;
-
- path = Configuration["SPELLCHECK_DICTIONARY_PATH"];
- string jsonFileName = Configuration["SPELLCHECK_JSON_FILENAME"];
- //check the spell check dictionary path environment variable value and assign default data folder
- //if it is null.
- path = string.IsNullOrEmpty(path) ? Path.Combine(env.ContentRootPath, "App_Data") : Path.Combine(env.ContentRootPath, path);
- //Set the default spellcheck.json file if the json filename is empty.
- jsonFileName = string.IsNullOrEmpty(jsonFileName) ? Path.Combine(path, "spellcheck.json") : Path.Combine(path, jsonFileName);
- if (System.IO.File.Exists(jsonFileName))
+ string jsonImport = File.ReadAllText(jsonFileName);
+ List spellChecks = JsonConvert.DeserializeObject>(jsonImport);
+ List spellDictCollection = new List();
+ string personalDictPath = null;
+ //construct the dictionary file path using customer provided path and dictionary name
+ if (spellChecks != null)
{
- string jsonImport = System.IO.File.ReadAllText(jsonFileName);
- List spellChecks = JsonConvert.DeserializeObject>(jsonImport);
- spellDictCollection = new List();
- //construct the dictionary file path using customer provided path and dictionary name
foreach (var spellCheck in spellChecks)
{
spellDictCollection.Add(new DictionaryData(spellCheck.LanguadeID, Path.Combine(path, spellCheck.DictionaryPath), Path.Combine(path, spellCheck.AffixPath)));
personalDictPath = Path.Combine(path, spellCheck.PersonalDictPath);
}
}
+ SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, 3);
}
-```
+}
-Document editor provides options to spell check word by word and spellcheck page by page when loading the documents.
+{% endhighlight %}
+{% endtabs %}
-### Spell check word by word
+### Web API for word-by-word spell check
-This Web API performs the spell check word by word and return the json which contains information about error words and suggestions if any. By default, spell check word by word is performed in Document editor when enabling spell check in client-side.
+This Web API performs spell checking word by word and returns a JSON response containing information about error words and suggestions, if any. By default, word-by-word spell checking is performed in the Document Editor when spell check is enabled on the client side.
-The following example code illustrates how to write a Web API for spell check word by word.
+The following example code illustrates how to write a Web API for word-by-word spell checking.
-```csharp
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("SpellCheck")]
- public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
- {
- try
- {
- SpellChecker spellCheck = new SpellChecker(spellDictionary, personalDictPath);
- spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
- return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- }
- catch
- {
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
- }
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
- public class SpellCheckJsonData
+[AcceptVerbs("Post")]
+[HttpPost]
+[EnableCors("AllowAllOrigins")]
+[Route("SpellCheck")]
+public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
+{
+ try
{
- public int LanguageID { get; set; }
- public string TexttoCheck { get; set; }
- public bool CheckSpelling { get; set; }
- public bool CheckSuggestion { get; set; }
- public bool AddWord { get; set; }
+ SpellChecker spellCheck = new SpellChecker();
+ spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
+ return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
}
-```
-
-### Spell check page by page
-
-This Web API performs the spell check page by page and return the json which contains information about error words and suggestions if any. By [enabling optimized spell check](../spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents.
-
-The following example code illustrates how to write a Web API for spell check page by page.
-
-```csharp
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("SpellCheckByPage")]
- public string SpellCheckByPage([FromBody] SpellCheckJsonData spellChecker)
+ catch
{
+ return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
+ }
+}
+public class SpellCheckJsonData
+{
+ public int LanguageID { get; set; }
+ public string TexttoCheck { get; set; }
+ public bool CheckSpelling { get; set; }
+ public bool CheckSuggestion { get; set; }
+ public bool AddWord { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Web API for page-by-page spell check
+
+This Web API performs spell checking page by page and returns a JSON response containing information about error words and suggestions, if any. By [enabling optimized spell check](https://help.syncfusion.com/document-processing/word/word-processor/angular/spell-check#optimized-spell-check) on the client side, you can perform page-by-page spell checking when loading documents.
+
+The following example code illustrates how to write a Web API for page-by-page spell checking.
+
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
+
+[AcceptVerbs("Post")]
+[HttpPost]
+[EnableCors("AllowAllOrigins")]
+[Route("SpellCheckByPage")]
+public string SpellCheckByPage([FromBody] SpellCheckJsonData spellChecker)
+{
try
- {
- SpellChecker spellCheck = new SpellChecker(spellDictionary, personalDictPath);
- spellCheck.CheckSpelling(spellChecker.LanguageID, spellChecker.TexttoCheck);
- return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- }
- catch
- {
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
+ {
+ SpellChecker spellCheck = new SpellChecker();
+ spellCheck.CheckSpelling(spellChecker.LanguageID, spellChecker.TexttoCheck);
+ return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
}
-
- public class SpellCheckJsonData
+ catch
{
- public int LanguageID { get; set; }
- public string TexttoCheck { get; set; }
- public bool CheckSpelling { get; set; }
- public bool CheckSuggestion { get; set; }
- public bool AddWord { get; set; }
+ return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
}
-```
+}
+
+public class SpellCheckJsonData
+{
+ public int LanguageID { get; set; }
+ public string TexttoCheck { get; set; }
+ public bool CheckSpelling { get; set; }
+ public bool CheckSuggestion { get; set; }
+ public bool AddWord { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+>N You can find the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) then configure the dictionary set up to make use for spell check or use the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) to host your own web service.
## Save as file formats other than SFDT and DOCX