From 5c0f9d0f86745264919c3da2c5725aab890a1017 Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Tue, 28 Jul 2026 13:55:39 +0530 Subject: [PATCH 1/3] 1039726: Updated files in Vue DOCX Editor --- .../Word/Word-Processor/vue/bookmark.md | 12 ++++++------ Document-Processing/Word/Word-Processor/vue/chart.md | 10 ++++++++-- .../Word/Word-Processor/vue/clipboard.md | 10 +++++----- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/vue/bookmark.md b/Document-Processing/Word/Word-Processor/vue/bookmark.md index 45a7c8fc5b..93e3645455 100644 --- a/Document-Processing/Word/Word-Processor/vue/bookmark.md +++ b/Document-Processing/Word/Word-Processor/vue/bookmark.md @@ -30,10 +30,10 @@ this.$refs.container.ej2Instances.documentEditor.editor.insertBookmark("Bookmark You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#selectbookmark) method by providing Bookmark name to select as shown in the following code snippet. ```c# -this.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1", true) +this.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1", true); ``` ->Note: Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection. +>Note: The second parameter is an optional parameter and it denotes whether to exclude the bookmark start and end from the selection. If true, excludes the bookmark start and end from the selection. ## Delete Bookmark @@ -51,7 +51,7 @@ You can get all the bookmarks in the document using [`getBookmarks`](https://ej2 this.$refs.container.ej2Instances.documentEditor.getBookmarks(false); ``` ->Note: Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark. +>Note: The parameter denotes whether to include hidden bookmarks. If false, hidden bookmarks are ignored. ## Get Bookmark from selection @@ -67,19 +67,19 @@ You can replace bookmark content without removing the bookmark start and end for ```csharp this.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1", true); -this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello World') +this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello World'); ``` You can replace content by removing the bookmark start and end, thus the bookmark content can't be tracked in future. ```csharp this.$refs.container.ej2Instances.documentEditor.selection.selectBookmark("Bookmark1"); -this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello World') +this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello World'); ``` ## Show or Hide bookmark -You can show or hide the show square brackets around bookmarked items in Document editor component. +You can show or hide the square brackets around bookmarked items in Document editor component. The following example code illustrates how to show or hide square brackets around bookmarked items. diff --git a/Document-Processing/Word/Word-Processor/vue/chart.md b/Document-Processing/Word/Word-Processor/vue/chart.md index 6e7059f786..d31b432e21 100644 --- a/Document-Processing/Word/Word-Processor/vue/chart.md +++ b/Document-Processing/Word/Word-Processor/vue/chart.md @@ -27,7 +27,8 @@ The following example shows chart preservation in Document Editor. # Supported Chart Types -The following chart types are supported in Document Editor +The following chart types are supported in Document Editor: + * Scatter_Markers * Bubble * Area @@ -50,4 +51,9 @@ The following chart types are supported in Document Editor ## Online Demo -Explore how to preserve charts in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/chart.html). \ No newline at end of file +Explore how to preserve charts in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/chart.html). + +## See Also + +* [Feature modules](./feature-module) +* [Getting started](./getting-started) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/clipboard.md b/Document-Processing/Word/Word-Processor/vue/clipboard.md index 654d4feed9..bcff5961c2 100644 --- a/Document-Processing/Word/Word-Processor/vue/clipboard.md +++ b/Document-Processing/Word/Word-Processor/vue/clipboard.md @@ -30,17 +30,17 @@ Cut a portion of document to system clipboard using built-in context menu of Doc ## 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 browser limitations, you can paste contents from system clipboard as plain text in Document Editor only using the ‘CTRL + V’ keyboard shortcut. ## Local paste -Document Editor expose API to enable local paste within the control. On enabling this, the following is performed: +Document 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. * Clipboard paste will be overridden, and internally stored data that has formatted text will be pasted. Refer to the following sample code. -``` - +```html + ``` By default, **enableLocalPaste** is false. @@ -63,7 +63,7 @@ Note: ## 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 you to paste the system clipboard data 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. For more information on setting up the web API service, refer to [Web services overview](./web-services-overview). 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. From ed74de7c529a56b35470e1084d11d95fb0af556a Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Tue, 28 Jul 2026 18:14:13 +0530 Subject: [PATCH 2/3] 1039726: Updated collaborative editing for Vue DOCX Editor --- .../vue/collaborative-editing/overview.md | 18 +-- .../using-redis-cache-asp-net-core.md | 112 ++++++++++++------ .../using-redis-cache-java.md | 66 ++++++----- 3 files changed, 117 insertions(+), 79 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/vue/collaborative-editing/overview.md b/Document-Processing/Word/Word-Processor/vue/collaborative-editing/overview.md index 4ec279999f..b9ebd0bae2 100644 --- a/Document-Processing/Word/Word-Processor/vue/collaborative-editing/overview.md +++ b/Document-Processing/Word/Word-Processor/vue/collaborative-editing/overview.md @@ -1,23 +1,23 @@ --- layout: post -title: Collaborative Editing in Vue Document editor control | Syncfusion -description: Learn about collaborative editing in Syncfusion Vue Document editor control of Syncfusion Essential JS 2 and more. +title: Collaborative Editing in Vue DOCX Editor control | Syncfusion +description: Learn about collaborative editing in Syncfusion Vue DOCX Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Collaborative Editing documentation: ug domainurl: ##DomainURL## --- -# Collaborative Editing in Vue +# Collaborative Editing in Vue DOCX editor component -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. +Vue 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. 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. ## Prerequisites -- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. +- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing. For setup details, refer to the [Web services overview](../vue/web-services-overview). - *Distributed Cache or Database*: Used to temporarily store the queue of editing operations. -### 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. @@ -30,13 +30,13 @@ To support collaborative editing, it's crucial to have a backing system that tem - ***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 `Operational Transformation` algorithm. Operational Transformation is a concurrency-control technique that reconciles concurrent edits by transforming the position and content of operations so all clients converge to the same final document state. ->**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. +>**Tips**: To calculate the average requests per second of your application, assume the editor in your live application is actively used by 1000 users. Each user's edit can trigger 2 to 5 requests per second, so 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. >**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](../collaborative-editing/using-redis-cache-asp-net-core) - [Collaborative editing using Java](../collaborative-editing/using-redis-cache-java) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-asp-net-core.md b/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-asp-net-core.md index 770dbcfa8a..b38eb8fb81 100644 --- a/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-asp-net-core.md +++ b/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-asp-net-core.md @@ -10,22 +10,42 @@ domainurl: ##DomainURL## # Collaborative editing in Vue DOCX Editor -Vue 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 +Vue 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 - [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor). +The following prerequisites are required to set up collaborative editing using Redis in an ASP.NET Core backend. SignalR handles real-time communication between clients and the server, while Redis stores the queue of editing operations. + +- [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (DOCX Editor). - SignalR - Redis +Configure CORS in the ASP.NET Core web service to allow the Vue application's origin (e.g., `http://localhost:8080` or your deployed domain) to call the API endpoints. Add CORS services and middleware in `Program.cs`: + +```csharp +// In Program.cs +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAllOrigins", policy => + { + builder.AllowAnyOrigin() + .AllowAnyHeader() + .AllowAnyMethod() + }); +}); + +// ...later in the pipeline configuration +app.UseCors(); +``` + ## SignalR 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). 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. @@ -77,7 +97,7 @@ builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis( 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. +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 200 editing operations (twice the SaveThreshold) are retained in Redis per document. When this limit is exceeded, the first 100 operations (as defined by the SaveThreshold) are removed from the cache and automatically saved to the source document, while the remaining operations stay in the cache for subsequent edits. The configuration and storage size of the Redis cache can be adjusted based on the following considerations: @@ -95,7 +115,7 @@ The configuration and storage size of the Redis cache can be adjusted based on t Collaborative editing is built using three main components: -### Client (Vue Document Editor) +### Client (Vue DOCX Editor) - Captures user edits in the document @@ -119,17 +139,17 @@ Collaborative editing is built using three main components: - Resolves conflicts between multiple users using the OT algorithm -## Integrate collaborative editing in client side +## Integrate collaborative editing on the client side -### Step 1: Integrate Document Editor in Vue sample +### Step 1: Integrate DOCX Editor in Vue sample -Refer to the following documentation to get started with the [Vue Document Editor](https://help.syncfusion.com/document-processing/word/word-processor/vue/getting-started) +Refer to the following documentation to get started with the [Vue DOCX Editor](https://help.syncfusion.com/document-processing/word/word-processor/vue/getting-started) ### Step 2: Enable collaborative editing -To enable collaborative editing, inject `CollaborativeEditingHandler` and set the `enableCollaborativeEditing` property to true in the Document Editor. +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 Document Editor. +The following code snippet demonstrates how to enable collaborative editing in the DOCX Editor. ```javaScript @@ -153,7 +173,7 @@ export default { data() { return { serviceUrl: 'http://localhost:5212/api/documenteditor/', - collborativeEditingServiceUrl: "http://localhost:5212/", + collaborativeEditingServiceUrl: "http://localhost:5212/", collaborativeEditingHandler: null, connection: null, }; @@ -165,7 +185,7 @@ export default { onCreated() { // Inject collaborative editing module. DocumentEditor.Inject(CollaborativeEditingHandler); - // Enable collaborative editing in Document Editor. + // Enable collaborative editing in DOCX Editor. this.$refs.doceditcontainer.ej2Instances.documentEditor.enableCollaborativeEditing = true; this.initializeSignalR(); this.loadDocumentFromServer(); @@ -180,7 +200,7 @@ export default { To broadcast changes and receive updates from remote users, install the [Microsoft SignalR npm](https://www.npmjs.com/package/@microsoft/signalr) package in the Vue application. -The following code snippet demonstrates how to configure SignalR in the Document Editor. +The following code snippet demonstrates how to configure SignalR in the DOCX Editor. ```javaScript import { HubConnectionBuilder, HttpTransportType, HubConnectionState } from '@microsoft/signalr'; @@ -188,20 +208,20 @@ import { HubConnectionBuilder, HttpTransportType, HubConnectionState } from '@mi methods: { initializeSignalR() { // SignalR connection - this.connection = new HubConnectionBuilder().withUrl(this.collborativeEditingServiceUrl + 'documenteditorhub', { + this.connection = new HubConnectionBuilder().withUrl(this.collaborativeEditingServiceUrl + 'documenteditorhub', { skipNegotiation: true, transport: HttpTransportType.WebSockets }).withAutomaticReconnect().build(); // Event handler for signalR connection - this.connection.on('dataReceived', this.onDataRecived.bind(this)); + this.connection.on('dataReceived', this.onDataReceived.bind(this)); this.connection.onclose(async () => { if (this.connection && this.connection.state === HubConnectionState.Disconnected) { - alert('Connection lost. Please relod the browser to continue.'); + alert('Connection lost. Please reload the browser to continue.'); } }); }, - onDataRecived(action, data) { + onDataReceived(action, data) { if (this.collaborativeEditingHandler) { if (action == 'connectionId') { // Update the current connection id to track other users @@ -247,11 +267,11 @@ methods: { const urlParams = new URLSearchParams(queryString); let roomId = urlParams.get('id'); if (roomId == null) { - roomId = Math.random().toString(32).slice(2) + roomId = Math.random().toString(36).slice(2) window.history.replaceState({}, "", `?id=` + roomId); } var httpRequest = new XMLHttpRequest(); - httpRequest.open('Post', this.collborativeEditingServiceUrl + 'api/CollaborativeEditing/ImportFile', true); + httpRequest.open('Post', this.collaborativeEditingServiceUrl + 'api/CollaborativeEditing/ImportFile', true); httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); httpRequest.onreadystatechange = () => { if (httpRequest.readyState === 4) { @@ -274,7 +294,7 @@ methods: { if (this.$refs.doceditcontainer) { this.collaborativeEditingHandler = this.$refs.doceditcontainer.ej2Instances.documentEditor.collaborativeEditingHandlerModule; // Update the room and version information to collaborative editing handler. - this.collaborativeEditingHandler.updateRoomInfo(roomName, data.version, this.collborativeEditingServiceUrl + 'api/CollaborativeEditing/'); + this.collaborativeEditingHandler.updateRoomInfo(roomName, data.version, this.collaborativeEditingServiceUrl + 'api/CollaborativeEditing/'); // Open the document this.$refs.doceditcontainer.ej2Instances.documentEditor.open(data.sfdt); @@ -295,20 +315,21 @@ methods: { 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 Document Editor. +The following code snippet demonstrates how to send changes to the server using the `contentChange` event in the DOCX Editor. ```javaScript methods: { onContentChange(args) { if (this.collaborativeEditingHandler) { // Send the editing action to server - this.collaborativeEditingHandler.sendActionToServer(args.operations) - }, + this.collaborativeEditingHandler.sendActionToServer(args.operations); + } + }, } ``` -## Integrate collaborative editing in server side +## Integrate collaborative editing on the server side -### Step 1: Create the Document Editor web service project +### Step 1: Create the DOCX Editor web service project Create an ASP.NET Core web service to handle server-side operations. @@ -330,7 +351,7 @@ Configure the Redis that stores temporary data for the collaborative editing ses // other code snippet "ConnectionStrings": { - "RedisConnectionString": "<>" + "RedisConnectionString": "" } // other code snippet @@ -384,37 +405,37 @@ Add the following code to the file to manage SignalR groups using room names. // Join group based on the room name and store the user details in Redis cache. public async Task JoinGroup(ActionInfo info) { - // Set the connection ID to info + // Set the connection ID on the info object info.ConnectionId = Context.ConnectionId; // Add the connection ID to the group await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName); - //To ensure whether the room exixts in the Redis cache + //To ensure whether the room exists in the Redis cache bool roomExists = await _db.KeyExistsAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix); if (roomExists) { // Fetch all connected users from Redis var allUsers = await _db.HashGetAllAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix); var userList = allUsers.Select(u => JsonConvert.DeserializeObject(u.Value)).ToList(); - - //Send the exisiting user details to the newly joined user. + + //Send the existing user details to the newly joined user. await Clients.Caller.SendAsync("dataReceived", "addUser", userList); } - - // Add user to Redis + + // Add user to Redis await _db.HashSetAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix, Context.ConnectionId, JsonConvert.SerializeObject(info)); - + // Store the room name with the connection ID await _db.HashSetAsync(CollaborativeEditingHelper.ConnectionIdRoomMappingKey, Context.ConnectionId, info.RoomName); - - // Notify all the exsisiting users in the group about the new user + + // Notify all the existing users in the group about the new user await Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info); } {% endhighlight %} {% endtabs %} -#### 3. Handle user disconnection +#### 3. Handle user disconnection The following code snippet demonstrates how to disconnect a connection using SignalR. @@ -442,7 +463,7 @@ The following code snippet demonstrates how to disconnect a connection using Sig if (pendingOps.Length > 0) { List actions = new List(); - // Prepare the message fir adding it in background service queue. + // Prepare the message for adding it in background service queue. foreach (var element in pendingOps) { actions.Add(JsonConvert.DeserializeObject(element.ToString())); @@ -532,7 +553,7 @@ The following code snippet demonstrates how the operations are cached and update try { ActionInfo modifiedAction = await 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; } @@ -643,6 +664,21 @@ For more details about code snippet, please refer this [link](https://github.com This step implements a thread-safe, bounded queue to handle document save requests asynchronously without blocking the main application flow. It uses a channel-based approach with a fixed capacity to efficiently manage concurrent operations. The background service processes each save request by loading the document, applying changes, saving the updated file, and clearing the cache to maintain consistency. +Create the following service classes (place them in a `Services` folder): + +- **`ISaveTaskQueue` / `SaveTaskQueue`**: A bounded `Channel`-based queue that exposes `QueueBackgroundWorkItemAsync(SaveInfo)` for the hub and controller to enqueue save requests. +- **`SaveTaskService` (`IHostedService` / `BackgroundService`)**: A long-running background worker that dequeues `SaveInfo` items, applies the actions to the source document, writes the file back, and clears the Redis cache for the room. + +Register the connection multiplexer and queue in `Program.cs`: + +```csharp +// In Program.cs +builder.Services.AddSingleton(sp => + ConnectionMultiplexer.Connect(builder.Configuration.GetConnectionString("RedisConnectionString"))); +builder.Services.AddSingleton(); +builder.Services.AddHostedService(); +``` + For more details about this code logic, please refer this [link](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing/tree/master/Server%20side%20with%20distributed%20cache/ASP.NET%20Core/Using%20Redis/Services) N> [View sample in GitHub](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing/tree/master/Server%20side%20with%20distributed%20cache/ASP.NET%20Core/Using%20Redis). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-java.md b/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-java.md index 52b9f76ae4..4f0e4960e8 100644 --- a/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-java.md +++ b/Document-Processing/Word/Word-Processor/vue/collaborative-editing/using-redis-cache-java.md @@ -1,7 +1,7 @@ --- layout: post -title: Collaborative Editing in Vue Document editor control | Syncfusion -description: Learn how to enable collaborative editing in Syncfusion Vue Document editor control of Syncfusion Essential JS 2 and more. +title: Collaborative Editing in Vue DOCX Editor control | Syncfusion +description: Learn how to enable collaborative editing in Syncfusion Vue DOCX Editor control of Syncfusion Essential JS 2 and more. control: Collaborative Editing Java platform: document-processing documentation: ug @@ -10,20 +10,20 @@ domainurl: ##DomainURL## # Collaborative Editing in Vue with Redis in Java -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. +Vue 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. 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. ## Prerequisites -The following are needed to enable collaborative editing in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor). +The following are needed to enable collaborative editing in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (DOCX Editor). - `SockJS` - `Redis` ## How to enable collaborative editing in client side -### Step 1: Enable collaborative editing in Document Editor +### Step 1: Enable collaborative editing in DOCX Editor -To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below. +To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the DOCX Editor, like in the code snippet below. ```javaScript