From 32078713e357abf63cbc507be568e1bec9dc3e09 Mon Sep 17 00:00:00 2001 From: Moushmi Dhanislas Date: Sat, 27 Jun 2026 10:39:25 +0530 Subject: [PATCH] 1036262: Updated restrict-editing md files --- .../angular/restrict-editing.md | 248 ++++++++++- .../angular/web-services/core.md | 7 +- .../angular/web-services/java.md | 11 +- .../angular/web-services/mvc.md | 7 +- .../asp-net-core/restrict-editing.md | 184 +++++++- .../asp-net-mvc/restrict-editing.md | 184 +++++++- .../Word-Processor/blazor/restrict-editing.md | 134 +++++- .../javascript-es5/restrict-editing.md | 294 ++++++++++++- .../javascript-es5/web-services/core.md | 7 +- .../javascript-es5/web-services/java.md | 11 +- .../javascript-es5/web-services/mvc.md | 7 +- .../javascript-es6/restrict-editing.md | 300 +++++++++++++- .../javascript-es6/web-services/core.md | 7 +- .../javascript-es6/web-services/java.md | 11 +- .../javascript-es6/web-services/mvc.md | 7 +- .../Word-Processor/react/web-services/java.md | 11 +- .../Word-Processor/react/web-services/mvc.md | 7 +- .../Word-Processor/vue/restrict-editing.md | 392 +++++++++++++++++- .../Word-Processor/vue/web-services/core.md | 7 +- .../Word-Processor/vue/web-services/java.md | 11 +- .../Word-Processor/vue/web-services/mvc.md | 7 +- 21 files changed, 1706 insertions(+), 148 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/restrict-editing.md b/Document-Processing/Word/Word-Processor/angular/restrict-editing.md index 6ff239e998..55adb2a1ea 100644 --- a/Document-Processing/Word/Word-Processor/angular/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/angular/restrict-editing.md @@ -1,22 +1,240 @@ --- 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. +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. platform: document-processing control: Restrict editing documentation: ug domainurl: ##DomainURL## --- -# Restrict Editing in Angular Document editor component +# Restrict Editing in Angular DOCX Editor -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. +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.component.ts" %} + +import { Component, ViewChild } from '@angular/core'; +import { DocumentEditorContainerComponent, ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; + +@Component({ + selector: 'app-container', + template: ` + + + `, + providers: [ToolbarService] +}) +export class AppComponent { + @ViewChild('documenteditor') public container: DocumentEditorContainerComponent; + public serviceLink: string; + + constructor() { + this.serviceLink = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; + } + + ngAfterViewInit() { + let sfdt: any = {"sfdt":"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"}; + this.container.documentEditor.open(JSON.stringify(sfdt)); + } + + enforceProtection() { + //enforce protection + this.container.documentEditor.editor.enforceProtection('123', 'ReadOnly'); + } + + stopProtection() { + //stop the document protection + 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.component.ts" %} + +import { Component, ViewChild } from '@angular/core'; +import { DocumentEditorContainerComponent, ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; + +@Component({ + selector: 'app-container', + template: ` + + + `, + providers: [ToolbarService] +}) +export class AppComponent { + @ViewChild('documenteditor') public container: DocumentEditorContainerComponent; + public serviceLink: string; + + constructor() { + this.serviceLink = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; + } + + ngAfterViewInit() { + let sfdt: any = {"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"}; + this.container.documentEditor.open(JSON.stringify(sfdt)); + } + + enforceProtection() { + //enforce protection + this.container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly'); + } + + stopProtection() { + //stop the document protection + 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.component.ts" %} + +import { Component, ViewChild } from '@angular/core'; +import { DocumentEditorContainerComponent, ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; + +@Component({ + selector: 'app-container', + template: ` + + + `, + providers: [ToolbarService] +}) +export class AppComponent { + @ViewChild('documenteditor') public container: DocumentEditorContainerComponent; + public serviceLink: string; + + constructor() { + this.serviceLink = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; + } + + ngAfterViewInit() { + let sfdt: any = {"sfdt":"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"}; + this.container.documentEditor.open(JSON.stringify(sfdt)); + } + + enforceProtection() { + //enforce protection + this.container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); + } + + stopProtection() { + //stop the document protection + 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.component.ts" %} + +import { Component, ViewChild } from '@angular/core'; +import { DocumentEditorContainerComponent, ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; + +@Component({ + selector: 'app-container', + template: ` + + + `, + providers: [ToolbarService] +}) +export class AppComponent { + @ViewChild('documenteditor') public container: DocumentEditorContainerComponent; + public serviceLink: string; + + constructor() { + this.serviceLink = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; + } + + ngAfterViewInit() { + let sfdt: any = {"sfdt":"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"}; + this.container.documentEditor.open(JSON.stringify(sfdt)); + } + + enforceProtection() { + //enforce protection + this.container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly'); + } + + stopProtection() { + //stop the document protection + 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.component.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 shows how to set currentUser +The following code example demonstrates how to set the currentUser. ```typescript this.container.documentEditor.currentUser = 'engineer@mycompany.com'; @@ -24,20 +242,20 @@ this.container.documentEditor.currentUser = 'engineer@mycompany.com'; ## 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 shows how to set userColor. +The following code example demonstrates how to set the userColor. ```typescript this.container.documentEditor.userColor = '#fff000'; ``` -You can toggle the highlight the editable region value using the "highlightEditableRanges" property. +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 shows how to toggle the highlight editable region value. +The following code example demonstrates how to enable or disable editable region highlighting. ```typescript -container.documentEditor.documentEditorSettings.highlightEditableRanges = true; +this.container.documentEditor.documentEditorSettings.highlightEditableRanges = true; ``` ## Restrict Editing Pane @@ -64,14 +282,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 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. ## 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 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..d0999db7b8 100644 --- a/Document-Processing/Word/Word-Processor/angular/web-services/core.md +++ b/Document-Processing/Word/Word-Processor/angular/web-services/core.md @@ -225,11 +225,11 @@ 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 @@ -237,6 +237,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/angular/web-services/java.md b/Document-Processing/Word/Word-Processor/angular/web-services/java.md index 267a6580ac..7b21a763db 100644 --- a/Document-Processing/Word/Word-Processor/angular/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/angular/web-services/java.md @@ -331,15 +331,16 @@ The following example code illustrates how to write a Web API for restrict editi @CrossOrigin(origins = "*", allowedHeaders = "*") @PostMapping("/api/wordeditor/RestrictEditing") public String[] restrictEditing(@RequestBody CustomRestrictParameter param) throws Exception { - if (param.passwordBase64 == "" && param.passwordBase64 == null) + if (param.passwordBase64 == "" || param.passwordBase64 == null) return null; - return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter { public String passwordBase64; public String saltBase64; public int spinCount; + public String algorithmSid; public String getPasswordBase64() { return passwordBase64; } @@ -349,6 +350,9 @@ The following example code illustrates how to write a Web API for restrict editi public int getSpinCount() { return spinCount; } + public String getAlgorithmSid() { + return algorithmSid; + } public void setPasswordBase64(String value) { passwordBase64= value; } @@ -358,6 +362,9 @@ The following example code illustrates how to write a Web API for restrict editi public void setSpinCount(int value) { spinCount= value; } + public void setAlgorithmSid(String value) { + algorithmSid= value; + } } ``` diff --git a/Document-Processing/Word/Word-Processor/angular/web-services/mvc.md b/Document-Processing/Word/Word-Processor/angular/web-services/mvc.md index 7650b525ba..4fd8c7511d 100644 --- a/Document-Processing/Word/Word-Processor/angular/web-services/mvc.md +++ b/Document-Processing/Word/Word-Processor/angular/web-services/mvc.md @@ -96,11 +96,11 @@ The following example code illustrates how to write a Web API for restrict editi [HttpPost] [EnableCors("*", "*", "*")] [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 Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter @@ -108,6 +108,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/restrict-editing.md b/Document-Processing/Word/Word-Processor/asp-net-core/restrict-editing.md index bc4b28b45e..486e65f891 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/restrict-editing.md @@ -1,22 +1,176 @@ --- layout: post -title: Restrict Editing in Document Editor Component| Syncfusion -description: Learn here all about Restrict Editing in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more. +title: Restrict Editing in ASP.NET Core DOCX Editor | Syncfusion +description: Learn how to enable Restrict Editing in the ASP.NET Core DOCX Editor to securely manage document access and control user modifications. platform: document-processing control: Restrict Editing documentation: ug --- -# Restrict Editing in Document Editor Component +# Restrict Editing in ASP.NET Core DOCX Editor -Document Editor provides support to restrict editing. When the protected document includes range permission, then unique user or user group is only authorized to edit separate text area. +Syncfusion® ASP.NET Core 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/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'ReadOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + 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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + 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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + 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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% endtabs %} + +### Format restrictions + +Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly. + +{% tabs %} +{% highlight ts tabtitle="TS" %} + +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/asp-net-core/web-services/core#restrict-editing) + +- [Web Service for Restrict editing in ASP.NET MVC](https://help.syncfusion.com/document-processing/word/word-processor/asp-net-core/web-services/mvc#restrict-editing) + +- [Web Service for Restrict editing in Java](https://help.syncfusion.com/document-processing/word/word-processor/asp-net-core/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/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 shows how to set currentUser +The following code example demonstrates how to set the currentUser. ```typescript container.documentEditor.currentUser = 'engineer@mycompany.com'; @@ -24,14 +178,22 @@ container.documentEditor.currentUser = 'engineer@mycompany.com'; ## Highlighting the text area -You can highlight the editable region of the current user using the `userColor` property. +The [userColor](https://ej2.syncfusion.com/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user. -The following code shows how to set userColor. +The following code example demonstrates how to set the userColor. ```typescript container.documentEditor.userColor = '#fff000'; ``` +The [highlightEditableRanges](https://ej2.syncfusion.com/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. + +```typescript +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; +``` + ## Restrict Editing Pane Restrict Editing Pane provides the following options to manage the document: @@ -45,8 +207,4 @@ Restrict Editing Pane provides the following options to manage the document: ## Online Demo -Explore how to restrict editing and protect Word documents using the ASP.NET Core Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/documentprotection#/tailwind3). - -* [How to protect the document in form filling mode](../asp-net-core/form-fields#protect-the-document-in-form-filling-mode) -* [How to protect the document in comments only mode](../asp-net-core/comments#protect-the-document-in-comments-only-mode) -* [How to protect the document in track changes only mode](../asp-net-core/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 ASP.NET Core Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/documentprotection#/tailwind3). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/restrict-editing.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/restrict-editing.md index 537a77a84c..851e9bd94b 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/restrict-editing.md @@ -1,22 +1,176 @@ --- layout: post -title: Restrict Editing in ASP.NET MVC Document Editor Component| Syncfusion -description: Learn here all about Restrict Editing in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. +title: Restrict Editing in ASP.NET MVC DOCX Editor | Syncfusion +description: Learn how to enable Restrict Editing in the ASP.NET MVC DOCX Editor to securely manage document access and control user modifications. platform: document-processing control: Restrict Editing documentation: ug --- -# Restrict Editing in Document Editor Component +# Restrict Editing in ASP.NET MVC DOCX Editor -Document Editor provides support to restrict editing. When the protected document includes range permission, then unique user or user group is only authorized to edit separate text area. +Syncfusion® ASP.NET MVC 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/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'ReadOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + 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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + 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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + 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="TS" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% endtabs %} + +### Format restrictions + +Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly. + +{% tabs %} +{% highlight ts tabtitle="TS" %} + +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/asp-net-mvc/web-services/core#restrict-editing) + +- [Web Service for Restrict editing in ASP.NET MVC](https://help.syncfusion.com/document-processing/word/word-processor/asp-net-mvc/web-services/mvc#restrict-editing) + +- [Web Service for Restrict editing in Java](https://help.syncfusion.com/document-processing/word/word-processor/asp-net-mvc/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/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 shows how to set currentUser +The following code example demonstrates how to set the currentUser. ```typescript container.documentEditor.currentUser = 'engineer@mycompany.com'; @@ -24,14 +178,22 @@ container.documentEditor.currentUser = 'engineer@mycompany.com'; ## Highlighting the text area -You can highlight the editable region of the current user using the `userColor` property. +The [userColor](https://ej2.syncfusion.com/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user. -The following code shows how to set userColor. +The following code example demonstrates how to set the userColor. ```typescript container.documentEditor.userColor = '#fff000'; ``` +The [highlightEditableRanges](https://ej2.syncfusion.com/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. + +```typescript +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; +``` + ## Restrict Editing Pane Restrict Editing Pane provides the following options to manage the document: @@ -45,8 +207,4 @@ Restrict Editing Pane provides the following options to manage the document: ## Online Demo -Explore how to restrict editing and protect Word documents using the ASP.NET MVC Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/documentprotection#/tailwind3). - -* [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 ASP.NET MVC Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/documentprotection#/tailwind3). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md b/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md index ece7464b32..44e22468b5 100644 --- a/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md @@ -1,19 +1,19 @@ --- layout: post -title: Restrict editing in Blazor DocumentEditor Component | Syncfusion -description: Checkout and learn here all about Restrict editing in Syncfusion Blazor DocumentEditor component and more. +title: Restrict editing in Blazor DOCX Editor | Syncfusion +description: Learn how to enable Restrict Editing in the Blazor DOCX Editor to securely manage document access and control user modifications. platform: document-processing control: DocumentEditor documentation: ug --- -# Restrict editing in Blazor DocumentEditor Component +# Restrict editing in Blazor DOCX Editor -This [Blazor Word Processor control](https://www.syncfusion.com/blazor-components/blazor-word-processor) (DocumentEditor) provides 2 types of restriction for editing: -* Read-only: Allows all the users to view the document contents but not make changes to it. -* Allows changes to certain portion of the document: Allows the users to edit to certain portion of the document. +Syncfusion® [Blazor Word Processor control](https://www.syncfusion.com/blazor-components/blazor-word-processor) (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. -## Read only +## 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 code example shows how to restrict or protect editing for the entire content (show as read-only). @@ -33,6 +33,96 @@ The following code example shows how to restrict or protect editing for the enti } ``` +## Form filling mode + +Document Editor supports protecting a document with form-filling restrictions, allowing users to edit only form fields. + +The following code example illustrates how to enforce form-filling protection in the Document Editor. + +```cshtml +@using Syncfusion.Blazor.DocumentEditor + + + + + +@code { + SfDocumentEditorContainer container; + + public async void EnforceProtection(object args) + { + // enforce form fields only protection + await container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.FormFieldsOnly); + } + + public async void StopProtection(object args) + { + // stop the document protection + await container.DocumentEditor.Editor.StopProtectionAsync("123"); + } +} +``` + +## Comments only mode + +Document Editor supports protecting a document in comments-only mode, allowing users to add or edit comments only. + +The following code example illustrates how to enforce and remove comments-only protection in the Document Editor. + +```cshtml +@using Syncfusion.Blazor.DocumentEditor + + + + + +@code { + SfDocumentEditorContainer container; + + public async void EnforceProtection(object args) + { + // enforce comments only protection + await container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.CommentsOnly); + } + + public async void StopProtection(object args) + { + // stop the document protection + await container.DocumentEditor.Editor.StopProtectionAsync("123"); + } +} +``` + +## 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 code example illustrates how to enforce and remove revisions-only protection in the Document Editor. + +```cshtml +@using Syncfusion.Blazor.DocumentEditor + + + + + +@code { + SfDocumentEditorContainer container; + + public async void EnforceProtection(object args) + { + // enforce revisions only protection + await container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.RevisionsOnly); + } + + public async void StopProtection(object args) + { + // stop the document protection + await container.DocumentEditor.Editor.StopProtectionAsync("123"); + } +} +``` + ## Allows changes to certain portion of the document Also, at some situations, you might need to allow changes for a certain portion of the document alone. Microsoft Word allows you to [make changes to parts of a Word document](https://support.microsoft.com/en-us/office/allow-changes-to-parts-of-a-protected-document-187ed01c-8795-43e1-9fd0-c9fca419dadf?ui=en-us&rs=en-us&ad=us). Likewise, the document editor control allows the users to make changes to certain parts of a document using similar user interface. @@ -41,6 +131,34 @@ Also, at some situations, you might need to allow changes for a certain portion ![Enabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-enable-edit-restriction.png) +## Set current user + +The `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. + +```cshtml +container.DocumentEditor.CurrentUser = "engineer@mycompany.com"; +``` + +## Highlighting the text area + +The `UserColor` property can be used to highlight the editable region of the current user. + +The following code example demonstrates how to set the UserColor. + +```cshtml +container.DocumentEditor.UserColor = "#fff000"; +``` + +The `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. + +```cshtml +container.DocumentEditor.DocumentEditorSettings.HighlightEditableRanges = true; +``` + ## Online Demo -Explore how to restrict editing and protect Word documents using the Blazor Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/document-protection?theme=fluent2). +Explore how to restrict editing and protect Word documents using the Blazor Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/document-protection?theme=fluent2). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md b/Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md index 9a49171a16..c60b839546 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md @@ -1,35 +1,297 @@ --- layout: post -title: Restrict editing in JavaScript (ES5) Document Editor Control -description: Learn here all about Restrict editing in Syncfusion JavaScript (ES5) Document Editor control of Syncfusion Essential JS 2 and more. +title: Restrict editing in JavaScript (ES5) DOCX Editor | Syncfusion +description: Learn how to enable Restrict Editing in the JavaScript (ES5) DOCX Editor to securely manage document access and control user modifications. platform: document-processing control: Restrict editing documentation: ug domainurl: ##DomainURL## --- -# Restrict Editing in JavaScript (ES5) Document Editor Control +# Restrict Editing in JavaScript (ES5) DOCX Editor -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. +Syncfusion® JavaScript (ES5) 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/javascript/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/javascript/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 js tabtitle="index.js" %} + +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +var sfdt = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'ReadOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + + + +
+ + + + + + +{% 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 js tabtitle="index.js" %} + +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +var 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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + + + +
+ + + + + + +{% 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 js tabtitle="index.js" %} + +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +var sfdt = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + + + +
+ + + + + + +{% 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 js tabtitle="index.js" %} + +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +var sfdt = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + + + +
+ + + + + + +{% endhighlight %} +{% endtabs %} + +### Format restrictions + +Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly. + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +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/javascript-es5/web-services/core#restrict-editing) + +- [Web Service for Restrict editing in ASP.NET MVC](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/mvc#restrict-editing) + +- [Web Service for Restrict editing in Java](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/java#restrict-editing) ## Set current user -You can use the [`currentUser`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#currentuser) property to authorize the current document user by name, email, or user group name. +The [`currentUser`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#currentuser) property can be used to authorize the current document user by name, email, or user group. -The following code shows how to set currentUser +The following code example demonstrates how to set the currentUser. -```ts -documentEditor.currentUser = 'engineer@mycompany.com'; +```js +container.documentEditor.currentUser = 'engineer@mycompany.com'; ``` ## Highlighting the text area -You can highlight the editable region of the current user using the [`userColor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#usercolor) property. +The [`userColor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#usercolor) property can be used to highlight the editable region of the current user. -The following code shows how to set userColor. +The following code example demonstrates how to set the userColor. -```ts -documentEditor.userColor = '#fff000'; +```js +container.documentEditor.userColor = '#fff000'; +``` + +The [`highlightEditableRanges`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettings/#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. + +```js +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; ``` ## Restrict Editing Pane @@ -55,12 +317,8 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/data-protection-cs2" %} +N> 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. + ## Online Demo Explore how to restrict editing and protect Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/document-protection.html). - -### 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 diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/core.md b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/core.md index 10391e967e..172afd0d7f 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/core.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/core.md @@ -227,11 +227,11 @@ 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 @@ -239,6 +239,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md index 834b0ba8ba..d05fc1d331 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md @@ -336,15 +336,16 @@ The following example code illustrates how to write a Web API for restrict editi @CrossOrigin(origins = "*", allowedHeaders = "*") @PostMapping("/api/wordeditor/RestrictEditing") public String[] restrictEditing(@RequestBody CustomRestrictParameter param) throws Exception { - if (param.passwordBase64 == "" && param.passwordBase64 == null) + if (param.passwordBase64 == "" || param.passwordBase64 == null) return null; - return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter { public String passwordBase64; public String saltBase64; public int spinCount; + public String algorithmSid; public String getPasswordBase64() { return passwordBase64; } @@ -354,6 +355,9 @@ The following example code illustrates how to write a Web API for restrict editi public int getSpinCount() { return spinCount; } + public String getAlgorithmSid() { + return algorithmSid; + } public void setPasswordBase64(String value) { passwordBase64= value; } @@ -363,6 +367,9 @@ The following example code illustrates how to write a Web API for restrict editi public void setSpinCount(int value) { spinCount= value; } + public void setAlgorithmSid(String value) { + algorithmSid= value; + } } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/mvc.md b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/mvc.md index 143b20d7a6..2d06be49f9 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/mvc.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/mvc.md @@ -96,11 +96,11 @@ The following example code illustrates how to write a Web API for restrict editi [HttpPost] [EnableCors("*", "*", "*")] [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 Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter @@ -108,6 +108,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md b/Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md index 04c9a562df..da560478ac 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md @@ -1,35 +1,301 @@ --- layout: post -title: Restrict editing in JavaScript (ES6) Document Editor Control | Syncfusion -description: Learn here all about Restrict editing in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Restrict editing in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to enable Restrict Editing in the JavaScript (ES6) DOCX Editor to securely manage document access and control user modifications. platform: document-processing control: Restrict editing documentation: ug domainurl: ##DomainURL## --- -# Restrict Editing in JavaScript (ES6) Document Editor Control +# Restrict Editing in JavaScript (ES6) DOCX Editor -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. +Syncfusion® JavaScript (ES6) 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/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/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="index.ts" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'ReadOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + +
+ + + + + + +{% 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="index.ts" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + +
+ + + + + + +{% 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="index.ts" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + +
+ + + + + + +{% 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="index.ts" %} + +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; + +DocumentEditorContainer.Inject(Toolbar); +let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +container.appendTo('#container'); + +let sfdt: any = {"sfdt":"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"}; +container.documentEditor.open(JSON.stringify(sfdt)); + +document.getElementById('enforceProtection').addEventListener('click', function () { + //enforce protection + container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly'); +}); + +document.getElementById('stopProtection').addEventListener('click', function () { + //stop the document protection + container.documentEditor.editor.stopProtection('123'); +}); + +{% endhighlight %} +{% highlight html tabtitle="index.html" %} + + + + + EJ2 Document Editor + + + + + + + + + + + + +
+ + + + + + +{% endhighlight %} +{% endtabs %} + +### Format restrictions + +Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} + +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/javascript-es6/web-services/core#restrict-editing) + +- [Web Service for Restrict editing in ASP.NET MVC](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/web-services/mvc#restrict-editing) + +- [Web Service for Restrict editing in Java](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/web-services/java#restrict-editing) ## Set current user -You can use the [`currentUser`](https://ej2.syncfusion.com/documentation/api/document-editor#currentuser) property to authorize the current document user by name, email, or user group name. +The [`currentUser`](https://ej2.syncfusion.com/documentation/api/document-editor#currentuser) property can be used to authorize the current document user by name, email, or user group. -The following code shows how to set currentUser +The following code example demonstrates how to set the currentUser. ```ts -documentEditor.currentUser = 'engineer@mycompany.com'; +container.documentEditor.currentUser = 'engineer@mycompany.com'; ``` ## Highlighting the text area -You can highlight the editable region of the current user using the [`userColor`](https://ej2.syncfusion.com/documentation/api/document-editor#usercolor) property. +The [`userColor`](https://ej2.syncfusion.com/documentation/api/document-editor#usercolor) property can be used to highlight the editable region of the current user. -The following code shows how to set userColor. +The following code example demonstrates how to set the userColor. ```ts -documentEditor.userColor = '#fff000'; +container.documentEditor.userColor = '#fff000'; +``` + +The [`highlightEditableRanges`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettings/#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. + +```ts +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; ``` ## Restrict Editing Pane @@ -44,9 +310,7 @@ Restrict Editing Pane provides the following options to manage the document: The following code shows Restrict Editing Pane. To unprotect the document, use password '123'. - - - {% tabs %} +{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/document-editor/javascript-es6/data-protection-cs2/index.ts %} {% endhighlight %} @@ -57,12 +321,8 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p {% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/data-protection-cs2" %} -## Online Demo +N> 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. -Explore how to restrict editing and protect Word documents using the JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/document-protection.html). - -### See Also +## Online Demo -* [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 JavaScript Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/document-protection.html). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/core.md b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/core.md index 8e912d80fe..9244b61eab 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/core.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/core.md @@ -227,11 +227,11 @@ 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 @@ -239,6 +239,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set;} } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md index 2b4189e963..1a8fac0358 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md @@ -336,15 +336,16 @@ The following example code illustrates how to write a Web API for restrict editi @CrossOrigin(origins = "*", allowedHeaders = "*") @PostMapping("/api/wordeditor/RestrictEditing") public String[] restrictEditing(@RequestBody CustomRestrictParameter param) throws Exception { - if (param.passwordBase64 == "" && param.passwordBase64 == null) + if (param.passwordBase64 == "" || param.passwordBase64 == null) return null; - return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter { public String passwordBase64; public String saltBase64; public int spinCount; + public String algorithmSid; public String getPasswordBase64() { return passwordBase64; } @@ -354,6 +355,9 @@ The following example code illustrates how to write a Web API for restrict editi public int getSpinCount() { return spinCount; } + public String getAlgorithmSid() { + return algorithmSid; + } public void setPasswordBase64(String value) { passwordBase64= value; } @@ -363,6 +367,9 @@ The following example code illustrates how to write a Web API for restrict editi public void setSpinCount(int value) { spinCount= value; } + public void setAlgorithmSid(String value) { + algorithmSid= value; + } } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/mvc.md b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/mvc.md index 200feb05c7..ec34d6bb89 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/mvc.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/mvc.md @@ -96,11 +96,11 @@ The following example code illustrates how to write a Web API for restrict editi [HttpPost] [EnableCors("*", "*", "*")] [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 Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter @@ -108,6 +108,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/react/web-services/java.md b/Document-Processing/Word/Word-Processor/react/web-services/java.md index d82dc37d39..7c6724988b 100644 --- a/Document-Processing/Word/Word-Processor/react/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/react/web-services/java.md @@ -333,15 +333,16 @@ The following example code illustrates how to write a Web API for restrict editi @CrossOrigin(origins = "*", allowedHeaders = "*") @PostMapping("/api/wordeditor/RestrictEditing") public String[] restrictEditing(@RequestBody CustomRestrictParameter param) throws Exception { - if (param.passwordBase64 == "" && param.passwordBase64 == null) + if (param.passwordBase64 == "" || param.passwordBase64 == null) return null; - return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter { public String passwordBase64; public String saltBase64; public int spinCount; + public String algorithmSid; public String getPasswordBase64() { return passwordBase64; } @@ -351,6 +352,9 @@ The following example code illustrates how to write a Web API for restrict editi public int getSpinCount() { return spinCount; } + public String getAlgorithmSid() { + return algorithmSid; + } public void setPasswordBase64(String value) { passwordBase64= value; } @@ -360,6 +364,9 @@ The following example code illustrates how to write a Web API for restrict editi public void setSpinCount(int value) { spinCount= value; } + public void setAlgorithmSid(String value) { + algorithmSid= value; + } } ``` diff --git a/Document-Processing/Word/Word-Processor/react/web-services/mvc.md b/Document-Processing/Word/Word-Processor/react/web-services/mvc.md index c68e5f0927..007fe29c6a 100644 --- a/Document-Processing/Word/Word-Processor/react/web-services/mvc.md +++ b/Document-Processing/Word/Word-Processor/react/web-services/mvc.md @@ -96,11 +96,11 @@ The following example code illustrates how to write a Web API for restrict editi [HttpPost] [EnableCors("*", "*", "*")] [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 Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter @@ -108,6 +108,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/vue/restrict-editing.md b/Document-Processing/Word/Word-Processor/vue/restrict-editing.md index 9cedc909ed..328099f9bb 100644 --- a/Document-Processing/Word/Word-Processor/vue/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/vue/restrict-editing.md @@ -1,22 +1,379 @@ --- layout: post -title: Restrict editing in Vue Document Editor Component | Syncfusion -description: Learn here all about Restrict editing in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Restrict editing in Vue DOCX Editor | Syncfusion +description: Learn how to enable Restrict Editing in the Vue DOCX Editor to securely manage document access and control user modifications. control: Restrict editing platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Restrict Editing in Vue Document Editor Component +# Restrict Editing in Vue DOCX Editor -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. +Syncfusion® Vue 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/vue/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% 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 html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% 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 html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% 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 html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### Format restrictions + +Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% 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/vue/web-services/core#restrict-editing) + +- [Web Service for Restrict editing in ASP.NET MVC](https://help.syncfusion.com/document-processing/word/word-processor/vue/web-services/mvc#restrict-editing) + +- [Web Service for Restrict editing in Java](https://help.syncfusion.com/document-processing/word/word-processor/vue/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/vue/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 shows how to set currentUser +The following code example demonstrates how to set the currentUser. ```javascript this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = 'engineer@mycompany.com'; @@ -24,20 +381,20 @@ this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = 'engineer@ ## Highlighting the text area -You can highlight the editable region of the current user using the `userColor` property. +The [userColor](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user. -The following code shows how to set userColor. +The following code example demonstrates how to set the userColor. ```javascript -this.$refs.doceditcontainer.ej2Instances.documentEditor..userColor = '#fff000'; +this.$refs.doceditcontainer.ej2Instances.documentEditor.userColor = '#fff000'; ``` -You can toggle the highlight the editable region value using the "highlightEditableRanges" property. +The [highlightEditableRanges](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions. -The following code shows how to toggle the highlight editable region value. +The following code example demonstrates how to enable or disable editable region highlighting. ```javascript -this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.highlightEditableRanges = true; +this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.highlightEditableRanges = true; ``` ## Restrict Editing Pane @@ -63,15 +420,8 @@ The following code shows Restrict Editing Pane. To unprotect the document, use p {% previewsample "/document-processing/code-snippet/document-editor/vue/getting-started-cs6" %} - -> 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 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. ## Online Demo -Explore how to restrict editing and protect Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/document-protection.html). - -## 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 Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/document-protection.html). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/web-services/core.md b/Document-Processing/Word/Word-Processor/vue/web-services/core.md index 13feb91c18..4beb66ea86 100644 --- a/Document-Processing/Word/Word-Processor/vue/web-services/core.md +++ b/Document-Processing/Word/Word-Processor/vue/web-services/core.md @@ -214,11 +214,11 @@ 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 @@ -226,6 +226,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ``` diff --git a/Document-Processing/Word/Word-Processor/vue/web-services/java.md b/Document-Processing/Word/Word-Processor/vue/web-services/java.md index 5fb49438ca..d39d7a53df 100644 --- a/Document-Processing/Word/Word-Processor/vue/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/vue/web-services/java.md @@ -291,15 +291,16 @@ The following example code illustrates how to write a Web API for restrict editi @CrossOrigin(origins = "*", allowedHeaders = "*") @PostMapping("/api/wordeditor/RestrictEditing") public String[] restrictEditing(@RequestBody CustomRestrictParameter param) throws Exception { - if (param.passwordBase64 == "" && param.passwordBase64 == null) + if (param.passwordBase64 == "" || param.passwordBase64 == null) return null; - return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter { public String passwordBase64; public String saltBase64; public int spinCount; + public String algorithmSid; public String getPasswordBase64() { return passwordBase64; } @@ -309,6 +310,9 @@ The following example code illustrates how to write a Web API for restrict editi public int getSpinCount() { return spinCount; } + public String getAlgorithmSid() { + return algorithmSid; + } public void setPasswordBase64(String value) { passwordBase64= value; } @@ -318,6 +322,9 @@ The following example code illustrates how to write a Web API for restrict editi public void setSpinCount(int value) { spinCount= value; } + public void setAlgorithmSid(String value) { + algorithmSid= value; + } } ``` diff --git a/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md b/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md index c704a8da6e..ae450e0c62 100644 --- a/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md +++ b/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md @@ -96,11 +96,11 @@ The following example code illustrates how to write a Web API for restrict editi [HttpPost] [EnableCors("*", "*", "*")] [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 Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount); + return Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount, param.algorithmSid); } public class CustomRestrictParameter @@ -108,6 +108,7 @@ The following example code illustrates how to write a Web API for restrict editi public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } + public string algorithmSid { get; set; } } ```