From 1fc4ec81e59c86c129f1ff6e2ff0d13ba7ac03f2 Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Fri, 31 Jul 2026 16:10:20 +0530 Subject: [PATCH 1/2] 1043990: Updated 5 files in Core DOCX Editor --- .../Word-Processor/asp-net-core/bookmark.md | 68 ++++++++-- .../Word/Word-Processor/asp-net-core/chart.md | 15 +-- .../Word-Processor/asp-net-core/clipboard.md | 65 +++++---- .../collaborative-editing/overview.md | 39 +++--- .../using-redis-cache-asp-net.md | 125 ++++++++++-------- 5 files changed, 193 insertions(+), 119 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/bookmark.md b/Document-Processing/Word/Word-Processor/asp-net-core/bookmark.md index 0769cf731f..39f2fce910 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/bookmark.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/bookmark.md @@ -1,24 +1,24 @@ --- layout: post -title: Bookmark in Document Editor Component | Syncfusion -description: Learn here all about Bookmark in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more. +title: Bookmark in DOCX Editor Component | Syncfusion +description: Learn here all about Bookmark in Syncfusion DOCX Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Bookmark documentation: ug --- -# Bookmarks in Document Editor Component +# Bookmarks in ASP.NET Core DOCX Editor Component Bookmark is a powerful tool that helps to mark a place in the document to find again easily. You can enter many bookmarks in the document and give each one a unique name to identify easily. -[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using built-in hyperlink dialog. You can also delete bookmarks from a document. +[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides a built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using the built-in hyperlink dialog. You can also delete bookmarks from a document. -N>Bookmark names need to begin with a letter. They can include both numbers and letters, but not spaces. To separate the words, use an underscore.Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for table of contents. +N>Bookmark names need to begin with a letter. They can include both numbers and letters, but not spaces. To separate the words, use an underscore. Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for table of contents. ## Add bookmark -Using [`insertBookmark`] method, Bookmark can be added to the selected text. +Using the [`insertBookmark`] method, bookmark can be added to the selected text. ```csharp container.documentEditor.editor.insertBookmark("Bookmark1"); @@ -26,33 +26,73 @@ container.documentEditor.editor.insertBookmark("Bookmark1"); ## Select Bookmark -You can select the bookmark in the document using [`selectBookmark`] method by providing Bookmark name to select as shown in the following code snippet. +You can select the bookmark in the document using the [`selectBookmark`] method by providing the bookmark name to select as shown in the following code snippet. ```csharp -container.documentEditor.selection.selectBookmark("Bookmark1"); +container.documentEditor.selection.selectBookmark("Bookmark1", true); ``` +N> The second parameter is optional and it denotes whether to exclude the bookmark start and end from the selection. If true, excludes bookmark start and end from selection. + ## Delete Bookmark -You can delete bookmark in the document using [`deleteBookmark`] method as shown in the following code snippet. +You can delete the bookmark in the document using the [`deleteBookmark`] method as shown in the following code snippet. ```csharp container.documentEditor.editor.deleteBookmark("Bookmark1"); ``` -## Get Bookmark +## Get Bookmark from Document -You can get all the bookmarks in the document using [`getBookmarks`] method as shown in the following code snippet. +You can get all the bookmarks in the document using the [`getBookmarks`] method on the `DocumentEditor` instance as shown in the following code snippet. + +```csharp +container.documentEditor.getBookmarks(false); +``` + +N> The boolean parameter denotes whether to include hidden bookmarks. If false, hidden bookmarks are ignored. + +## Get Bookmark from Selection + +You can get bookmarks in the current selection in the document using the [`getBookmarks`] method on the `Selection` instance as shown in the following code snippet. ```csharp container.documentEditor.selection.getBookmarks(false); ``` -N> Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark. +## Show or Hide Bookmark + +You can show or hide the bookmark indicators around bookmarked items in DOCX Editor component. + +The following example code illustrates how to show or hide the bookmark indicators around bookmarked items. + +```csharp +container.documentEditor.documentEditorSettings.showBookmarks = true; +``` + +## Replace Bookmark Content + +### Preserve the Bookmark While Replacing Content + +When you pass `true` for the `excludeStartEnd` parameter in `selectBookmark`, the bookmark start and end markers are preserved. The subsequent `insertText` call replaces only the content between the markers, so the bookmark remains intact and can be tracked later. + +```csharp +container.documentEditor.selection.selectBookmark("Bookmark1", true); +container.documentEditor.editor.insertText("Hello World"); +``` + +### Remove the Bookmark While Replacing Content + +When you omit the `excludeStartEnd` parameter (or pass `false`), the bookmark start and end markers are included in the selection. The subsequent `insertText` call replaces both the content and the markers, so the bookmark is removed and cannot be tracked later. + +```csharp +container.documentEditor.selection.selectBookmark("Bookmark1"); +container.documentEditor.editor.insertText("Hello World"); +``` ## Bookmark Dialog -The following example shows how to open bookmark dialog in Document Editor. +The following example shows how to open the bookmark dialog in DOCX Editor. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -65,7 +105,7 @@ The following example shows how to open bookmark dialog in Document Editor. ## Online Demo -Explore how to insert and manage bookmarks in 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/hyperlinksandbookmarks#/tailwind3). +Explore how to insert and manage bookmarks in Word documents using the ASP.NET Core DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/hyperlinksandbookmarks#/tailwind3). ## See Also diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/chart.md b/Document-Processing/Word/Word-Processor/asp-net-core/chart.md index e54c8c569d..4874b46849 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/chart.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/chart.md @@ -1,17 +1,17 @@ --- layout: post -title: Chart in Document Editor Component | Syncfusion -description: Learn here all about chart in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more. +title: Chart in DOCX Editor Component | Syncfusion +description: Learn here all about charts in the Syncfusion DOCX Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Chart documentation: ug --- +# Chart in ASP.NET Core DOCX Editor Component -# Chart in Document Editor Component - -[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides chart preservation support. Using Document Editor, you can see the chart reports from your Word document. +[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) provides chart preservation support. Using DOCX Editor, you can view charts from your Word document. +The following example shows chart preservation in the DOCX Editor. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -22,10 +22,9 @@ documentation: ug {% endhighlight %} {% endtabs %} - ## Supported Chart Types -The following chart types are supported in document editor +The following chart types are supported in the DOCX Editor: * Scatter_Markers * Bubble * Area @@ -48,4 +47,4 @@ The following chart types are supported in document editor ## Online Demo -Explore how to preserve charts in 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/chart#/tailwind3). \ No newline at end of file +Explore how to preserve charts in Word documents using the ASP.NET Core DOCX Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/asp-net-core/documenteditor/chart#/tailwind3). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md b/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md index d7f6cb322a..db227acb9d 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md @@ -1,44 +1,47 @@ --- layout: post -title: Clipboard in Document Editor Component | Syncfusion -description: Learn here all about clipboard in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more. +title: Clipboard in DOCX Editor Component | Syncfusion +description: Learn here all about clipboard in Syncfusion DOCX Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Clipboard documentation: ug --- -# Clipboard in Document Editor Component +# Clipboard in ASP.NET Core DOCX Editor Component -[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) takes advantage of system clipboard and allows to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard. +[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) takes advantage of the system clipboard and allows you to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard. ## Copy -Copy a portion of document to system clipboard using built-in context menu of document editor. You can also do it programmatically using the following sample code. +Copy a portion of the document to the system clipboard using the built-in context menu of the DOCX Editor. You can also do it programmatically using the following sample code. ```typescript -documentEditor.selection.copy(); +container.documentEditor.selection.copy(); ``` ## Cut -Cut a portion of document to system clipboard using built-in context menu of document editor. You can also do it programmatically using the following sample code. +Cut a portion of the document to the system clipboard using the built-in context menu of the DOCX Editor. You can also do it programmatically using the following sample code. ```typescript -documentEditor.editor.cut(); +container.documentEditor.editor.cut(); ``` ## Paste -Due to limitations, you can paste contents from system clipboard as plain text in document editor only using the ‘CTRL + V’ keyboard shortcut. +Due to limitations, you can paste content from the system clipboard as plain text in the DOCX Editor only using the "Ctrl + V" keyboard shortcut. + +N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. ## Local paste -Document editor exposes API to enable local paste within the control. On enabling this, the following is performed: +The DOCX Editor exposes an API to enable local paste within the control. On enabling this, the following is performed: -* Selected contents will be stored to an internal clipboard in addition to system clipboard. +* Selected contents will be stored to an internal clipboard in addition to the system clipboard. * Clipboard paste will be overridden, and internally stored data that has formatted text will be pasted. +The following example shows how to enable local paste in the DOCX Editor. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -50,38 +53,54 @@ Document editor exposes API to enable local paste within the control. On enablin {% endtabs %} -By default, **enableLocalPaste** is false. When local paste is enabled for a document editor instance, you can paste contents programmatically if the internal clipboard has stored data during last copy operation. +By default, **enableLocalPaste** is false. When local paste is enabled for a DOCX Editor instance, you can paste content programmatically if the internal clipboard has stored data during the last copy operation. + ```typescript -documentEditor.editor.pasteLocal(); +container.documentEditor.editor.pasteLocal(); ``` ### EnableLocalPaste behavior |**EnableLocalPaste** |**Paste behavior details**| |--------------------------|----------------------| -|True |Allows to paste content that is copied from the same Document editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside Document editor component can’t be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will be resolved. So, you can copy and paste content within the Document editor component using API and context menu options too.| -|False|Allows to paste content from system clipboard. Hence the content copied from both the Document editor component and outside can be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.| +|True |Allows pasting content that is copied from the same DOCX Editor component alone and prevents pasting content from the system clipboard. Hence, content copied from outside the DOCX Editor component cannot be pasted.
The browser limitation of pasting from the system clipboard using API and context menu options will be resolved. So, you can copy and paste content within the DOCX Editor component using API and context menu options too.| +|False|Allows pasting content from the system clipboard. Hence, content copied from both the DOCX Editor component and outside can be pasted.
The browser limitation of pasting from the system clipboard using API and context menu options will remain.| -N> Keyboard shortcut for pasting will work properly in both cases. Copying content from Document editor component and pasting outside will work properly in both cases. +N> +* Keyboard shortcut for pasting will work properly in both cases. +* Copying content from the DOCX Editor component and pasting outside will work properly in both cases. + +### Paste options in context menu + +In the DOCX Editor, paste options in the context menu will be in a disabled state if you try to copy/paste content from outside of the DOCX Editor. It gets enabled when `enableLocalPaste` is `true` and you copy/paste content within the DOCX Editor. + +N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. Hence, the paste option is disabled in the context menu. + +Alternatively, you can use the keyboard shortcuts: + +* Cut: Ctrl + X +* Copy: Ctrl + C +* Paste: Ctrl + V ## Paste with formatting -Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `EnableLocalPaste` property in Document Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`]() by the web API service implementation. This library helps to paste the system clipboard data with formatting. +The DOCX Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in the DOCX Editor to `false` and use the `Syncfusion.EJ2.WordEditor.AspNet.Core` .NET Standard library for the ASP.NET Core web API service implementation. This library helps you to paste the system clipboard data with formatting. You can paste your system clipboard data in the following ways: -* **Keep Source Formatting** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style. -* **Match Destination Formatting** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. -* **Text Only** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded and tables are converted to a series of paragraphs. +* **Keep Source Formatting:** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style. +* **Match Destination Formatting:** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. +* **Text Only:** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded, and tables are converted to a series of paragraphs. This paste option appears as follows. -![Image](images/paste.png) +![Paste options](images/paste.png) -N> When you paste content from an external source into the Document Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer [here](./unsupported-features) to learn more about unsupported elements. +N> When you paste content from an external source into the DOCX Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer [here](./unsupported-features) to learn more about unsupported elements. ## See Also -* [Keyboard shortcuts](../asp-net-core/keyboard-shortcut) +* [Feature modules](../asp-net-core/feature-module) +* [Keyboard shortcuts](../asp-net-core/keyboard-shortcut#clipboard) diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md b/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md index 4d80821046..639392bd4c 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md @@ -1,42 +1,43 @@ --- layout: post -title: Collaborative Editing in ASP.NET Core Document Editor | Syncfusion +title: Collaborative Editing in ASP.NET Core DOCX Editor | Syncfusion component: DocumentEditor -description: Learn about collaborative editing in Syncfusion Document editor control of Syncfusion Essential JS 2 and more. +description: Learn about collaborative editing in Syncfusion DOCX Editor control of Syncfusion Essential JS 2 and more. platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Collaborative Editing in ASP.NET Core Document Editor +# Collaborative Editing in ASP.NET Core DOCX Editor -Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. +Collaborative editing allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. + +To get started with integrating collaborative editing, refer to [Collaborative editing using Redis cache in ASP.NET Core](./using-redis-cache-asp-net). ## Prerequisites -- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. -- *Distributed Cache or Database*: Used to temporarily store the queue of editing operations. +- ***Real-Time Transport Protocol***: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. For this integration, [SignalR](https://learn.microsoft.com/aspnet/core/signalr/introduction/) is used. +- ***Distributed Cache or Database***: Used to temporarily store the queue of editing operations. For example, you can use [Redis](https://redis.io/) as a distributed cache or a database such as SQL Server. -### Real time transport protocol +### Real-time transport protocol -- *Managing Connections*: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server. -- *Broadcasting Changes*: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version. +- ***Managing Connections***: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server. +- ***Broadcasting Changes***: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version. ### Distributed cache or database -To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options: +To support collaborative editing, it is crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options: + +- ***Distributed Cache***: Handles a higher number of `HTTP` requests per second compared to a database approach. For instance, a server with 2 vCPUs and 8GB RAM can handle up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database. -- *Distributed Cache*: Handles a higher number of `HTTP` requests per second compared to a database approach. For instance, a server with 2 vCPUs and 8GB RAM can handle up to 125 requests per second using a distributed cache. -- *Database*: With the same server configuration, it can handle up to 50 requests per second. +- ***Database***: With the same server configuration, it can handle up to 50 requests per second. -Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` Algorithm. +Using the distributed cache or database, all the editing operations are queued in order and conflict resolution is performed using the `Operational Transformation` algorithm. -> *Recommendation* - If you expect average `http` requests per second of your live application as 50 or below, then the database can provide reliable a backing system for operation queue. If you expect average requests per second of your live application as above 50, then the distributed cache is highly recommended backing system. +N> 1. To calculate the average requests per second of your application, assume the DOCX Editor in your live application is actively used by 1000 users, and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your application will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second. -> Tips to calculate the average requests per second of your application: -Assume the editor in your live application is actively used by 1000 users and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second. +N> 2. The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs. -> Note: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs. -#### See Also +## See Also -- [Collaborative editing using Redis cache in ASP.NET Core](../../asp-net-core/collaborative-editing/using-redis-cache-asp-net) \ No newline at end of file +- [Collaborative editing using Redis cache in ASP.NET Core](./using-redis-cache-asp-net) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/using-redis-cache-asp-net.md b/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/using-redis-cache-asp-net.md index 4605c36e5e..757fe39380 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/using-redis-cache-asp-net.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/using-redis-cache-asp-net.md @@ -1,87 +1,95 @@ --- layout: post -title: Collaborative Editing in Document Editor Control | Syncfusion +title: Collaborative Editing in DOCX Editor Control | Syncfusion component: DocumentEditor -description: Learn how to enable and perform the collaborative editing in ASP.NET Core Syncfusion Document editor Component. +description: Learn how to enable and perform the collaborative editing in ASP.NET Core Syncfusion DOCX Editor Component. platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Collaborative Editing with Redis in ASP.NET Core Document Editor +# Collaborative Editing with Redis in ASP.NET Core DOCX Editor -Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes. +[ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) supports collaborative editing, which allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. ## Prerequisites -Following things are needed to enable collaborative editing in [ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) +The following are needed to enable collaborative editing in the DOCX Editor: - SignalR - Redis ## SignalR -In collaborative editing, real-time communication is essential for users to see each other's changes instantly. We use a real-time transport protocol to efficiently send and receive data as edits occur. For this, we utilize SignalR, which supports real-time data exchange between the client and server. SignalR ensures that updates are transmitted immediately, allowing seamless collaboration by handling the complexities of connection management and offering reliable communication channels. - -To make SignalR work in a distributed environment (with more than one server instance), it needs to be configured with either Azure SignalR Service or a Redis backplane. +SignalR enables real-time communication by instantly sending and receiving document changes between clients and the server, ensuring seamless collaboration. In distributed environments, it can be scaled using Azure SignalR Service or a Redis backplane. ### Scale-out SignalR using Azure SignalR service -Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers). +Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application (across multiple servers). -Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method +The following code snippet demonstrates how to configure Azure SignalR in an ASP.NET Core application using the `AddAzureSignalR` method in the `Program.cs` file of the web service project. ```csharp -builder.Services.AddSignalR() .AddAzureSignalR("", options => { - // Specify the channel name +builder.Services.AddSignalR().AddAzureSignalR("", options => { + // Specify the channel name options.Channels.Add("document-editor"); - }); +}); ``` ### Scale-out SignalR using Redis -Using a Redis backplane, you can achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency. +A Redis backplane enables horizontal scaling in a SignalR application. SignalR uses Redis to efficiently broadcast messages across multiple servers, allowing the application to support a large number of users with minimal latency. + +In the SignalR application, install the following NuGet package: -In the SignalR app, install the following NuGet package: -* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis` +- Microsoft.AspNetCore.SignalR.StackExchangeRedis -Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method +The following code snippet demonstrates how to configure the Redis backplane in an ASP.NET Core application using the `AddStackExchangeRedis` method in the `Program.cs` file of the web service project. ```csharp builder.Services.AddSignalR().AddStackExchangeRedis(""); ``` -Configure options as needed: -The following example shows how to add a channel prefix in the ConfigurationOptions object. +Configure the options as required. + +The following example demonstrates how to add a channel prefix using the `ConfigurationOptions` object. ```csharp builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options => - { - options.Configuration.ChannelPrefix = "document-editor"; - }); +{ + options.Configuration.ChannelPrefix = "document-editor"; +}); ``` ## Redis -In collaborative editing, Redis is used to store temporary data that helps queue editing operations and resolve conflicts using the `Operational Transformation` algorithm. +In collaborative editing, Redis is used to store temporary data that helps queue editing operations and resolve conflicts using the `Operational Transformation` algorithm. + +All editing operations are stored in the Redis cache. To prevent memory buildup, a `SaveThreshold` limit can be configured at the application level. For example, if the SaveThreshold is set to 100, up to twice that number of editing operations are retained in Redis per document. When this limit is exceeded, the first 100 operations (as defined by the save threshold) are removed from the cache and automatically saved to the source document. + +The configuration and storage size of the Redis cache can be adjusted based on the following considerations: -All editing operations in collaborative editing are stored in the Redis cache. To prevent memory buildup, we can configure a `SaveThreshold` limit at the application level. If the `SaveThreshold` is 100, editing operations up to twice the save threshold limit are kept in Redis per document. Once exceeded, the first 100 operations (as defined by the save threshold) are removed from the cache and automatically saved to the source input document. +- *Storage Requirements*: A minimum of 400 KB of cache memory is required to edit a single document, with the capacity to store up to 100 editing operations. Storage requirements may increase based on the following factors: -The configuration and store size of the Redis cache can be adjusted based on the following considerations. + - *Images*: Increases with the number of images added to the document. -- *Storage Requirements*: A minimum of 400KB of cache memory is needed for editing a single document, with the capacity to store up to 100 editing operations. Storage needs may increase based on following factor. - - *Images*: Increases with the number of images added to the document. - - *Pasted content*: Depends on the size of the SFDT content. -- *Connection Limits*: Redis has a limit on concurrent connections. Choose the Redis configuration based on your user base to ensure optimal performance. + - *Pasted content*: Depends on the size of the SFDT content. -> For better performance, we recommend to have minimum `SaveThreshold` limit of 100. +- *Connection Limits*: Redis has a limit on concurrent connections. The Redis configuration should be selected based on the user base to ensure optimal performance. -## How to enable collaborative editing in client side +> For better performance, a minimum `SaveThreshold` value of 100 is recommended. -### Step 1: Enable collaborative editing in Document Editor +## Integrate collaborative editing in client side -To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below. +### Step 1: Integrate DOCX Editor +Refer to the following documentation to get started with the [ASP.NET Core DOCX Editor](https://help.syncfusion.com/document-processing/word/word-processor/asp-net-core/getting-started-core). + +### Step 2: Enable collaborative editing + +To enable collaborative editing, inject `CollaborativeEditingHandler` and set the `enableCollaborativeEditing` property to true in the DOCX Editor. + +The following code snippet demonstrates how to enable collaborative editing in the DOCX Editor. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -92,11 +100,11 @@ To enable collaborative editing, inject `CollaborativeEditingHandler` and set th {% endhighlight %} {% endtabs %} +### Step 3: Configure SignalR to send and receive changes -## Step 2: Configure SignalR to send and receive changes - -To broadcast the changes made and receive changes from remote users, configure SignalR like below. +To broadcast changes and receive updates from remote users, configure SignalR in the DOCX Editor. +The following code snippet demonstrates how to configure SignalR in the DOCX Editor. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -105,10 +113,11 @@ To broadcast the changes made and receive changes from remote users, configure S {% endtabs %} -### Step 3: Join SignalR room while opening the document +### Step 4: Join SignalR room while opening the document -When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server. +When opening a document, a unique ID must be generated for each document. These unique IDs are then used to create rooms using SignalR, which facilitates real-time communication and collaborative editing among multiple users. +The following code snippet demonstrates how to generate a unique ID and open a document. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -119,8 +128,9 @@ When opening a document, we need to generate a unique ID for each document. Thes ### Step 5: Broadcast current editing changes to remote users -Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event. +Changes made on the client side must be transmitted to the server to be broadcast to other connected users. +The following code snippet demonstrates how to send changes to the server using the `contentChange` event in the DOCX Editor. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -136,7 +146,6 @@ Changes made on the client-side need to be sent to the server-side to broadcast We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's Program.cs file. ```csharp - using Microsoft.Azure.SignalR; ..... builder.Services.AddSignalR(); ..... @@ -186,7 +195,7 @@ static Dictionary userManager = new Dictionary>”, false); +CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, "<>", false); } } if (userManager.ContainsKey(Context.ConnectionId)) { - //Notify other user in the group about user exit the collaborative editing session + //Notify other user in the group about a user exiting the collaborative editing session Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId); Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName); userManager.Remove(Context.ConnectionId); @@ -240,11 +249,13 @@ Configure the Redis that stores temporary data for the collaborative editing ses #### Import File -1. When opening a document, check the Redis cache for pending operations and retrieve them for the collaborative editing session. -2. If pending operations exist, apply them to the WordDocument instance using the `UpdateActions` method before converting it to the SFDT format. +Used to open DOCX documents, verify the Redis cache for pending operations, and retrieve them for the collaborative editing session. + +1. When opening a document, check the Redis cache for pending operations and retrieve them for the collaborative editing session. +2. If pending operations exist, apply them to the `WordDocument` instance using the `UpdateActions` method before converting it to the SFDT format. ```csharp -public string ImportFile([FromBody] FileInfo param) +public async Task ImportFile([FromBody] FileInfo param) { ..... ..... @@ -269,13 +280,13 @@ public string ImportFile([FromBody] FileInfo param) ``` -#### Update editing records to Redis cache. +#### Update editing records to Redis cache Each edit operation made by the user is sent to the server and pushed into a Redis list data structure. Each operation is assigned a version number upon insertion into Redis. After inserting the records to the server, the position of the current editing operation must be transformed relative to any previous editing operations not yet synced with the client using the `TransformOperation` method to resolve any potential conflicts with the help of the `Operational Transformation` algorithm. -Once the conflict is resolved, the current operation is broadcast to all connected users within the group. +Once the conflict is resolved, the current operation is broadcast to all connected users within the group. The following code snippet demonstrates how the operations are cached and updated. ```csharp public async Task UpdateAction([FromBody] ActionInfo param) @@ -283,7 +294,7 @@ public async Task UpdateAction([FromBody] ActionInfo param) try { ActionInfo modifiedAction = AddOperationsToCache(param); - //After transformation broadcast changes to all users in the gropu + //After transformation broadcast changes to all users in the group await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction); return modifiedAction; } @@ -293,7 +304,7 @@ public async Task UpdateAction([FromBody] ActionInfo param) } } -private ActionInfo AddOperationsToCache(ActionInfo action) +private async Task AddOperationsToCache(ActionInfo action) { int clientVersion = action.Version; string insertScript = "-------" @@ -319,17 +330,21 @@ private ActionInfo AddOperationsToCache(ActionInfo action) // Transform operations that have not been transformed yet previousOperations.Where(op => !op.IsTransformed).ToList().ForEach(op => CollaborativeEditingHandler.TransformOperation(op, previousOperations)); } - action = actions[actions.Count - 1]; - action.Version = updateVersion; + action = previousOperations[previousOperations.Count - 1]; + action.Version = clientVersion; //Return the transformed operation to broadcast it to other clients. return action; } ``` -#### Add Web API to get previous operation as a backup to get lost operations +#### Web API to retrieve previous operations (Backup for lost operations) + +On the client side, messages broadcast using SignalR may be received out of order or lost due to network issues. In such cases, a backup mechanism is required to retrieve missing operations from Redis. + +Using the following method, all operations performed after the last successfully synchronized client version can be retrieved, ensuring that any missing operations are returned to the requesting client. -On the client side, messages broadcast using SignalR might be received out of order or lost due to network issues. In such cases, we need a backup method to retrieve missing operations from Redis. By using the following method, we can retrieve all operations performed after the last successful client-synchronized version and return any missing operations to the requesting client. +The following code snippet demonstrates how to track and retrieve pending operations. ```csharp public async Task GetActionsFromServer(ActionInfo param) @@ -370,6 +385,6 @@ public async Task GetActionsFromServer(ActionInfo param) ``` -Full version of the code discussed about can be found in below GitHub location. +The full version of the code discussed can be found at the following GitHub location. GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing) From 70e80a0fb435207aa906ff678e1d178a7137e6e5 Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Fri, 31 Jul 2026 16:25:51 +0530 Subject: [PATCH 2/2] 1043990: Resolved CI failure --- .../asp-net-core/collaborative-editing/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md b/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md index 639392bd4c..b2a68c53a5 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/collaborative-editing/overview.md @@ -16,8 +16,8 @@ To get started with integrating collaborative editing, refer to [Collaborative e ## Prerequisites -- ***Real-Time Transport Protocol***: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. For this integration, [SignalR](https://learn.microsoft.com/aspnet/core/signalr/introduction/) is used. -- ***Distributed Cache or Database***: Used to temporarily store the queue of editing operations. For example, you can use [Redis](https://redis.io/) as a distributed cache or a database such as SQL Server. +- *Real-Time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. +- *Distributed Cache or Database*: Used to temporarily store the queue of editing operations. ### Real-time transport protocol