From 4221b55b928a5464e860d7f0647de7274b662ff8 Mon Sep 17 00:00:00 2001 From: SuriyaprakasamR Date: Thu, 10 Sep 2026 16:58:25 +0530 Subject: [PATCH] 1052813: Added UG content for the track-changes-revision-colors usage. --- .../Word-Processor/angular/track-changes.md | 46 +++++++++++++++++++ .../asp-net-core/track-changes.md | 15 ++++++ .../asp-net-mvc/track-changes.md | 15 ++++++ .../Word-Processor/blazor/track-changes.md | 30 ++++++++++++ .../javascript-es5/track-changes.md | 13 ++++++ .../javascript-es6/track-changes.md | 16 +++++++ .../Word-Processor/react/track-changes.md | 46 +++++++++++++++++++ .../Word/Word-Processor/vue/track-changes.md | 28 +++++++++++ .../document-editor.cs | 5 ++ .../track-changes-revision-colors/razor | 22 +++++++++ .../track-changes-revision-colors/tagHelper | 21 +++++++++ .../document-editor.cs | 5 ++ .../track-changes-revision-colors/razor | 22 +++++++++ .../track-changes-revision-colors/tagHelper | 21 +++++++++ 14 files changed, 305 insertions(+) create mode 100644 Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs create mode 100644 Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/razor create mode 100644 Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper create mode 100644 Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs create mode 100644 Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor create mode 100644 Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/tagHelper diff --git a/Document-Processing/Word/Word-Processor/angular/track-changes.md b/Document-Processing/Word/Word-Processor/angular/track-changes.md index 3cd5a485fe..2eefa643f3 100644 --- a/Document-Processing/Word/Word-Processor/angular/track-changes.md +++ b/Document-Processing/Word/Word-Processor/angular/track-changes.md @@ -245,7 +245,53 @@ export class AppComponent implements OnInit { } } ``` +## Custom Colors for Track Changes +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +```typescript +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { + DocumentEditorContainerComponent, + DocumentEditorContainerModule, + ToolbarService +} from '@syncfusion/ej2-angular-documenteditor'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [DocumentEditorContainerModule], + providers: [ToolbarService], + template: ` + + + ` +}) +export class App implements AfterViewInit { + + @ViewChild('container') + public container!: DocumentEditorContainerComponent; + + ngAfterViewInit(): void { + if(this.container!=null && this.container.documentEditorSettings != null && + this.container.documentEditorSettings.revisionSettings != null) { + this.container.documentEditorSettings.revisionSettings.revisionColors = [ + '#047a18', + '#bb00ff', + '#c14f16' + ]; + } + + this.container.documentEditor.resize(); + } +} +``` ## Online Demo Explore how to track and review changes in Word documents using the Angular DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/track-changes). diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md b/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md index 460f4b1547..5e94ba51ab 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md @@ -123,6 +123,21 @@ container.documentEditor.selection.navigateNextRevision(); container.documentEditor.selection.navigatePreviousRevision(); ``` +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Track-changes-revision-colors.cs" %} +{% include code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + ## Filtering changes based on user In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user. diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md index 591d1c42d6..2082849d8c 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md @@ -118,6 +118,21 @@ container.documentEditor.selection.navigateNextRevision(); container.documentEditor.selection.navigatePreviousRevision(); ``` +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Track-changes-revision-colors.cs" %} +{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs %} +{% endhighlight %} +{% endtabs %} + ## Filtering changes based on user The DOCX Editor has a built-in review panel that supports filtering changes by user. diff --git a/Document-Processing/Word/Word-Processor/blazor/track-changes.md b/Document-Processing/Word/Word-Processor/blazor/track-changes.md index 9c9899e10e..2a6cfc4c62 100644 --- a/Document-Processing/Word/Word-Processor/blazor/track-changes.md +++ b/Document-Processing/Word/Word-Processor/blazor/track-changes.md @@ -77,6 +77,36 @@ await container.DocumentEditor.Selection.NavigateNextRevisionAsync(); await container.DocumentEditor.Selection.NavigatePreviousRevisionAsync(); ``` +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +```csharp +@using Syncfusion.Blazor.DocumentEditor + + + + +@code { + private SfDocumentEditorContainer container; + // Define settings with revision colors + private DocumentEditorSettingsModel Settings = new DocumentEditorSettingsModel() + { + RevisionSettings = new RevisionSettingsModel() + { + RevisionColors = new string[] + { + "#0000ff", + "#bb00ff", + "#c14f16" + } + } + }; +} +``` + ## Filter changes by user In the DOCX Editor, we have a built-in review panel in which we have provided support for filtering changes based on the user. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md b/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md index b3655fa886..38fb5e07f8 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md @@ -180,6 +180,19 @@ Tracked changes only protection can be enabled in the UI by using the [Restrict N> In the enforceProtection method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of the protection type are `NoProtection`, `ReadOnly`, `FormFieldsOnly`, `CommentsOnly`, and `RevisionsOnly`. In the stopProtection method, the parameter denotes the password. +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +```js +container.documentEditorSettings.revisionSettings.revisionColors = [ + '#0e76b1', + '#bb00ff', + '#c14f16' +]; +``` ## Events DOCX Editor provides the [beforeAcceptRejectChanges](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md b/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md index e1d56aeceb..76f2f5f67b 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md @@ -216,6 +216,22 @@ Tracked changes only protection can be enabled in UI by using [Restrict Editing N> In the `enforceProtection` method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of the protection type are `NoProtection | ReadOnly | FormFieldsOnly | CommentsOnly | RevisionsOnly`. In the `stopProtection` method, the parameter denotes the password. + +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +```ts +container.documentEditorSettings.revisionSettings.revisionColors = [ + '#0e76b1', + '#bb00ff', + '#c14f16' +]; +``` + + ## Events DocumentEditor provides [beforeAcceptRejectChanges](https://ej2.syncfusion.com/documentation/api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before a tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](https://ej2.syncfusion.com/documentation/api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content. diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index 5fb23f528f..bf96358bc0 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -305,6 +305,52 @@ createRoot(document.getElementById('sample')).render(); {% endhighlight %} {% endtabs %} +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +```typescript +import { useRef, useEffect } from 'react'; +import { + DocumentEditorContainerComponent, + Toolbar, + Inject +} from '@syncfusion/ej2-react-documenteditor'; + +function App() { + const containerRef = useRef(null); + + useEffect(() => { + if (containerRef.current) { + // Access the underlying DocumentEditor instance + const editor = containerRef.current.documentEditorSettings; + + // Update revision colors dynamically + editor.revisionSettings.revisionColors = [ + '#0000ff', + '#bb00ff', + '#c14f16' + ]; + } + }, []); + + return ( + + + + ); +} + +export default App; +``` + ## Filter Changes by User The built-in review panel in the DOCX Editor supports filtering changes based on the user. diff --git a/Document-Processing/Word/Word-Processor/vue/track-changes.md b/Document-Processing/Word/Word-Processor/vue/track-changes.md index 09f8a0d6b4..8ed8b63f2b 100644 --- a/Document-Processing/Word/Word-Processor/vue/track-changes.md +++ b/Document-Processing/Word/Word-Processor/vue/track-changes.md @@ -159,6 +159,34 @@ this.$refs.container.documentEditor.selection.navigateNextRevision(); this.$refs.container.documentEditor.selection.navigatePreviousRevision(); ``` +## Custom Colors for Track Changes + +You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array. + +The following example illustrates how to set the color order for track changes in the DOCX Editor + +```ts + + + +``` + ## Filtering changes based on user In the DOCX Editor, we have built-in review panel in which we have provided support for filtering changes based on the user. diff --git a/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs new file mode 100644 index 0000000000..cca48eedf9 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs @@ -0,0 +1,5 @@ + public ActionResult Default() + { + return View(); + } + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/razor b/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/razor new file mode 100644 index 0000000000..ed83f1a477 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/razor @@ -0,0 +1,22 @@ +
+ + @Html.EJS().DocumentEditorContainer("container") + .EnableTrackChanges(true) + .EnableToolbar(true) + .Height("590px") + .Render() +
+ +@section Scripts { + +} diff --git a/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper new file mode 100644 index 0000000000..a91f9759bd --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper @@ -0,0 +1,21 @@ +
+ + +
+ +@section Scripts { + +} diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs new file mode 100644 index 0000000000..cca48eedf9 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs @@ -0,0 +1,5 @@ + public ActionResult Default() + { + return View(); + } + diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor new file mode 100644 index 0000000000..ed83f1a477 --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor @@ -0,0 +1,22 @@ +
+ + @Html.EJS().DocumentEditorContainer("container") + .EnableTrackChanges(true) + .EnableToolbar(true) + .Height("590px") + .Render() +
+ +@section Scripts { + +} diff --git a/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/tagHelper b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/tagHelper new file mode 100644 index 0000000000..a91f9759bd --- /dev/null +++ b/Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/tagHelper @@ -0,0 +1,21 @@ +
+ + +
+ +@section Scripts { + +}