diff --git a/Document-Processing/Word/Word-Processor/vue/restrict-editing.md b/Document-Processing/Word/Word-Processor/vue/restrict-editing.md index 9cedc909ed..7c16eb7e99 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,4 @@ 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. - -## 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 +N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). \ 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..8cb2b0cdba 100644 --- a/Document-Processing/Word/Word-Processor/vue/web-services/core.md +++ b/Document-Processing/Word/Word-Processor/vue/web-services/core.md @@ -56,7 +56,7 @@ The following example code illustrates how to write a Web API for importing Word The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component. ->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`. +>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or TIFF format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`. The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document. @@ -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/mvc.md b/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md index c704a8da6e..5359914878 100644 --- a/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md +++ b/Document-Processing/Word/Word-Processor/vue/web-services/mvc.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Mvc in Vue Document editor component +# MVC in Vue Document editor component DocumentEditor depends on server side interaction for below listed operations can be written in ASP.NET MVC using [Syncfusion.EJ2.WordEditor.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc5) or [Syncfusion.EJ2.WordEditor.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc4). @@ -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; } } ```