| layout | post |
|---|---|
| title | Document management in Vue DOCX Editor component | Syncfusion |
| description | Learn here all about Document management in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more. |
| control | Document management |
| platform | document-processing |
| documentation | ug |
| domainurl |
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.
You can use the currentUser property to authorize the current document user by name, email, or user group name.
The following code shows how to set currentUser.
this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = 'engineer@mycompany.com';You can highlight the editable region of the current user using the userColor property.
The following code shows how to set userColor.
this.$refs.doceditcontainer.ej2Instances.documentEditor.userColor = '#fff000';You can toggle the highlight the editable region value using the "highlightEditableRanges" property.
The following code shows how to toggle the highlight editable region value.
this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.highlightEditableRanges = true; Restrict Editing Pane provides the following options to manage the document:
- To apply formatting restrictions to the current document, select the allow formatting checkbox.
- To apply editing restrictions to the current document, select the read only checkbox.
- To add users to the current document, select the more users option and add user from the popup dialog.
- To include range permission to the current document, select the parts of the document and choose users who are allowed to freely edit them from the listed checkbox.
- To apply the chosen editing restrictions, click the YES, START ENFORCING PROTECTION button. A dialog box displays asking for a password to protect.
- To stop protection, select STOP PROTECTION button. A dialog box displays asking for a password to stop protection.
The following code shows the base editor setup required to render the Restrict Editing Pane. To unprotect the document, use password '123'.
{% tabs %}
{% highlight html tabtitle="Composition API (/src/App.vue)" %}
{% include code-snippet/document-editor/vue/getting-started-cs1/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (/src/App.vue)" %}
{% include code-snippet/document-editor/vue/getting-started-cs1/app.vue %}
{% endhighlight %}
{% endtabs %}
{% previewsample "/document-processing/code-snippet/document-editor/vue/getting-started-cs1" %}
The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX 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 or Docker image for hosting your own web service and use for the serviceUrl property.