diff --git a/Document-Processing/Word/Word-Processor/angular/restrict-editing.md b/Document-Processing/Word/Word-Processor/angular/restrict-editing.md index 9ec1735824..4d38e16330 100644 --- a/Document-Processing/Word/Word-Processor/angular/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/angular/restrict-editing.md @@ -256,30 +256,50 @@ this.container.documentEditor.currentUser = 'engineer@mycompany.com'; {% endhighlight %} {% endtabs %} -## Highlighting the text area +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. -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. +### Insert editable region +Use the [insertEditingRegion](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="TS" %} + +// Allow editing for all users +this.container.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +this.container.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + +The [userColor](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user. + The following code example demonstrates how to set the userColor. - - + {% tabs %} -{% highlight ts tabtitle="app.component.ts" %} - +{% highlight ts tabtitle="TS" %} + this.container.documentEditor.userColor = '#fff000'; - + {% endhighlight %} {% endtabs %} - + +### Enable or disable editable region highlighting + The [highlightEditableRanges](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions. - + The following code example demonstrates how to enable or disable editable region highlighting. - + {% tabs %} -{% highlight ts tabtitle="app.component.ts" %} - +{% highlight ts tabtitle="TS" %} + this.container.documentEditor.documentEditorSettings.highlightEditableRanges = true; - + {% endhighlight %} {% endtabs %} 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..a694517da1 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 @@ -22,15 +22,52 @@ The following code shows how to set currentUser 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 following code shows how to set userColor. - -```typescript +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. + +### Insert editable region +Use the `insertEditingRegion` method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. + +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="TS" %} + +// Allow editing for all users +container.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +container.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + +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. + +{% tabs %} +{% highlight ts tabtitle="TS" %} + container.documentEditor.userColor = '#fff000'; -``` + +{% endhighlight %} +{% endtabs %} + +### Enable or disable editable region highlighting + +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. + +{% tabs %} +{% highlight ts tabtitle="TS" %} + +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; + +{% endhighlight %} +{% endtabs %} ## Restrict Editing Pane 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..0bdb1d6406 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 @@ -22,15 +22,52 @@ The following code shows how to set currentUser 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 following code shows how to set userColor. - -```typescript +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. + +### Insert editable region +Use the `insertEditingRegion` method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. + +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="TS" %} + +// Allow editing for all users +container.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +container.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + +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. + +{% tabs %} +{% highlight ts tabtitle="TS" %} + container.documentEditor.userColor = '#fff000'; -``` + +{% endhighlight %} +{% endtabs %} + +### Enable or disable editable region highlighting + +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. + +{% tabs %} +{% highlight ts tabtitle="TS" %} + +container.documentEditor.documentEditorSettings.highlightEditableRanges = true; + +{% endhighlight %} +{% endtabs %} ## Restrict Editing Pane diff --git a/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md b/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md index ece7464b32..c5025297e2 100644 --- a/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/blazor/restrict-editing.md @@ -33,13 +33,47 @@ The following code example shows how to restrict or protect editing for the enti } ``` -## Allows changes to certain portion of the document +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. -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. +### Insert editable region +Use the [InsertEditingRegionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertEditingRegionAsync) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users -![Disabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-disable-edit-restriction.png) +The following example shows how to insert an editable region. +```cshtml + +container.DocumentEditor.Editor.InsertEditingRegionAsync(); + +``` + +### Highlight color for editable region + +The [UserColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_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 + + + +``` + +### Enable or disable editable region highlighting + +The [HighlightEditableRanges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_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. + +```cshtml + + -![Enabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-enable-edit-restriction.png) +@code { + + public DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { HighlightEditableRanges = false }; +} + +``` ## Online Demo 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 17c687a332..aeaaf33be2 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md @@ -436,29 +436,50 @@ container.documentEditor.currentUser = 'engineer@mycompany.com'; {% endhighlight %} {% endtabs %} -## Highlighting the text area +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. -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. +### Insert editable region +Use the [insertEditingRegion](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="TS" %} + +// Allow editing for all users +container.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +container.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + +The [userColor](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user. + The following code example demonstrates how to set the userColor. - + {% tabs %} -{% highlight js tabtitle="index.js" %} - +{% highlight ts tabtitle="TS" %} + container.documentEditor.userColor = '#fff000'; - + {% endhighlight %} {% endtabs %} - -The [`highlightEditableRanges`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettings#highlighteditableranges) property can be used to toggle the highlighting of editable regions. - + +### Enable or disable editable region highlighting + +The [highlightEditableRanges](https://ej2.syncfusion.com/javascript/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. - + {% tabs %} -{% highlight js tabtitle="index.js" %} - +{% highlight ts tabtitle="TS" %} + container.documentEditor.documentEditorSettings.highlightEditableRanges = true; - + {% endhighlight %} {% endtabs %} 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 abe90f8408..5b294c9555 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md @@ -421,29 +421,50 @@ container.documentEditor.currentUser = 'engineer@mycompany.com'; {% endhighlight %} {% endtabs %} -## Highlighting the text area +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. -The [`userColor`](https://ej2.syncfusion.com/documentation/api/document-editor#usercolor) property can be used to highlight the editable region of the current user. +### Insert editable region +Use the [insertEditingRegion](https://ej2.syncfusion.com/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="TS" %} + +// Allow editing for all users +container.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +container.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + +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 example demonstrates how to set the userColor. - + {% tabs %} -{% highlight ts tabtitle="index.ts" %} - +{% highlight ts tabtitle="TS" %} + container.documentEditor.userColor = '#fff000'; - + {% endhighlight %} {% endtabs %} - -The [`highlightEditableRanges`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettings#highlighteditableranges) property can be used to toggle the highlighting of editable regions. - + +### Enable or disable editable region highlighting + +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. - + {% tabs %} -{% highlight ts tabtitle="index.ts" %} - +{% highlight ts tabtitle="TS" %} + container.documentEditor.documentEditorSettings.highlightEditableRanges = true; - + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/react/restrict-editing.md b/Document-Processing/Word/Word-Processor/react/restrict-editing.md index 1499443ec0..4f5ce55d64 100644 --- a/Document-Processing/Word/Word-Processor/react/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/react/restrict-editing.md @@ -256,31 +256,53 @@ container.documentEditor.currentUser = 'engineer@mycompany.com'; {% endhighlight %} {% endtabs %} -## Highlighting the text area +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. +### Insert editable region +Use the [insertEditingRegion](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. + +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="TS" %} + +// Allow editing for all users +container.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +container.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + The [userColor](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user. The following code example demonstrates how to set the userColor. - + {% tabs %} {% highlight ts tabtitle="TS" %} - + container.documentEditor.userColor = '#fff000'; - + {% endhighlight %} {% endtabs %} - -The [highlightEditableRanges](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions. - + +### Enable or disable editable region highlighting + +The [highlightEditableRanges](https://ej2.syncfusion.com/react/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. - + {% tabs %} {% highlight ts tabtitle="TS" %} - + container.documentEditor.documentEditorSettings.highlightEditableRanges = true; - + {% endhighlight %} {% endtabs %} + ## Restrict Editing Pane diff --git a/Document-Processing/Word/Word-Processor/vue/restrict-editing.md b/Document-Processing/Word/Word-Processor/vue/restrict-editing.md index 7c16eb7e99..fb044aabd6 100644 --- a/Document-Processing/Word/Word-Processor/vue/restrict-editing.md +++ b/Document-Processing/Word/Word-Processor/vue/restrict-editing.md @@ -379,23 +379,52 @@ The following code example demonstrates how to set the currentUser. this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = 'engineer@mycompany.com'; ``` -## Highlighting the text area +## Protect document with editable region +User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes. -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. +### Insert editable region +Use the [insertEditingRegion](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users. +The following example shows how to insert an editable region. +{% tabs %} +{% highlight ts tabtitle="JS" %} + +// Allow editing for all users +this.$refs.doceditcontainer.ej2Instances.documentEditor.editor.insertEditingRegion(); + +// pass a username to restrict access +this.$refs.doceditcontainer.ej2Instances.documentEditor.editor.insertEditingRegion("User Name"); + +{% endhighlight %} +{% endtabs %} + +### Highlight color for editable region + +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 example demonstrates how to set the userColor. - -```javascript + +{% tabs %} +{% highlight ts tabtitle="JS" %} + this.$refs.doceditcontainer.ej2Instances.documentEditor.userColor = '#fff000'; -``` - + +{% endhighlight %} +{% endtabs %} + +### Enable or disable editable region highlighting + 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 example demonstrates how to enable or disable editable region highlighting. - -```javascript + +{% tabs %} +{% highlight ts tabtitle="JS" %} + this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.highlightEditableRanges = true; -``` + +{% endhighlight %} +{% endtabs %} ## Restrict Editing Pane