From a9763baf62b1fc5f0f39e6702d6cee9917005593 Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Fri, 7 Aug 2026 17:14:24 +0530 Subject: [PATCH] 1043990: Updated 5 files in VUE DOCX Editor --- .../vue/collaborative-editing/overview.md | 16 ++-- .../using-redis-cache-asp-net-core.md | 92 +++++++++++++------ .../using-redis-cache-java.md | 60 ++++++------ .../Word/Word-Processor/vue/faq/sfdt-faqs.md | 14 +-- .../vue/faq/unsupported-file-format.md | 28 +++--- 5 files changed, 123 insertions(+), 87 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..7912dadfb0 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 Document 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 Document 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. - *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..4e42d361fb 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 @@ -1,31 +1,49 @@ --- layout: post -title: Collaborative Editing in Vue DOCX Editor | Syncfusion -description: Learn how to enable collaborative editing in Vue DOCX Editor to allow multiple users to work on a document simultaneously. +title: Collaborative Editing in Vue using ASP.NET Core | Syncfusion +description: Learn how to enable collaborative editing in Vue Document Editor to allow multiple users to work on a document simultaneously. platform: document-processing control: Collaborative Editing documentation: ug domainurl: ##DomainURL## --- -# Collaborative editing in Vue DOCX Editor +# Collaborative editing in Vue with Redis in ASP.NET Core -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](https://www.syncfusion.com/docx-editor-sdk/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 are needed to enable collaborative editing in Document 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 middle ware 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 +95,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: @@ -153,7 +171,7 @@ export default { data() { return { serviceUrl: 'http://localhost:5212/api/documenteditor/', - collborativeEditingServiceUrl: "http://localhost:5212/", + collaborativeEditingServiceUrl: "http://localhost:5212/", collaborativeEditingHandler: null, connection: null, }; @@ -188,20 +206,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 @@ -251,7 +269,7 @@ methods: { 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 +292,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); @@ -302,13 +320,14 @@ 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 -### Step 1: Create the Document Editor web service project +### Step 1: Create the Document Editor web service project Create an ASP.NET Core web service to handle server-side operations. @@ -384,37 +403,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 +461,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 +551,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 +662,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..3e7715a542 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 using Java | Syncfusion +description: Learn how to enable collaborative editing in Syncfusion Vue Document Editor control of Syncfusion Essential JS 2 and more. control: Collaborative Editing Java platform: document-processing documentation: ug @@ -10,11 +10,11 @@ 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. +This feature 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 Document Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor). - `SockJS` - `Redis` @@ -85,7 +85,7 @@ methods: { this.joinGroup(roomName); } }, - //Receive the remote action and apply to currenty document. + // Receive the remote action and apply it to the current document. onMessageReceived(data) { const content = JSON.parse(data.body); if (content.payload.operations != null) { @@ -97,14 +97,19 @@ methods: { ### Step 3: Subscribe to specific topic 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 SockJS, which facilitates sending and receiving data from the server. +When opening a document, we need to use a unique identifier (such as the file name) for each document. These unique identifiers are then used to create rooms using SockJS, which facilitates sending and receiving data from the server. ```javaScript methods: { loadDocumentFromServer() { + let httpRequest = new XMLHttpRequest(); + httpRequest.open('POST', this.collborativeEditingServiceUrl + '/ImportFile', true); + httpRequest.setRequestHeader('Content-Type', 'application/json'); httpRequest.onreadystatechange = () => { if (httpRequest.readyState === 4) { if (httpRequest.status === 200 || httpRequest.status === 304) { + let data = JSON.parse(httpRequest.responseText); + let roomName = this.fileName; if (this.$refs.doceditcontainer) { //Update the room and version information to collaborative editing handler. this.collaborativeEditingHandler.updateRoomInfo(roomName, data.version, this.collborativeEditingServiceUrl); @@ -134,7 +139,7 @@ methods: { ### Step 4: 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 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. ```javaScript methods: { @@ -151,7 +156,7 @@ methods: { ### Step 1: Configure SockJS hub to create room for collaborative editing session. -To manage groups for each document, create a folder named “Hub” and add a file named ``` DocumentEditorHub.java ``` inside it. Add the following code to the file to manage SockJS groups using room names. +To manage groups for each document, create a folder named "Hub" and add a file named ``` DocumentEditorHub.java ``` inside it. Add the following code to the file to manage SockJS groups using room names. Join the group by using unique id of the document by using `joinGroup` method. @@ -168,9 +173,7 @@ public void joinGroup(ActionInfo info, SimpMessageHeaderAccessor headerAccessor, MessageHeaders headers = new MessageHeaders(additionalHeaders); // send the connection Id to the client broadcastToRoom(docName, info, headers); - ………… - ………… - ………… + // Register the user in the room (e.g., add sessionId to the document map in Redis). } public static void broadcastToRoom(String roomName, Object payload, MessageHeaders headers) { @@ -239,7 +242,7 @@ public String importFile(@RequestBody FilesPathInfo file) throws Exception { #### Update editing records to Redis - Each edit operation made by the user is sent to the server and is pushed to the Redis. Each operation receives a version number after being inserted into the Redis. -- After inserting the records to the server, the position of the current editing operation must be transformed against any previous editing operations not yet synced with the client using the TransformOperation method. +- After inserting the records to the server, the position of the current editing operation must be transformed against any previous editing operations not yet synced with the client using the `transformOperation` method. - After performing the transformation, the current operation is broadcast to all connected users within the group. ```java @@ -255,6 +258,7 @@ public ActionInfo updateAction(@RequestBody ActionInfo param) throws Exception { private ActionInfo addOperationsToCache(ActionInfo action) throws Exception { int clientVersion = action.getVersion(); + // Serialize the action before storing it in Redis. ………… ………… ………… @@ -267,16 +271,14 @@ private ActionInfo addOperationsToCache(ActionInfo action) throws Exception { String[] values = { serializedAction, String.valueOf(clientVersion), String.valueOf(CollaborativeEditingHelper.saveThreshold) }; - ………… - ………… - ………… + // Execute the Redis script to persist and transform the action. // Return the updated action return action; } ``` #### Add Web API to get previous operation as a backup to get lost operations -On the client side, messages send from server using SockJS may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the Redis. +On the client side, messages sent from the server using SockJS may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the Redis. Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client. ```java @@ -315,15 +317,15 @@ public String getActionsFromServer(@RequestBody ActionInfo param) throws ClassNo } } ``` -## How to perform Scaling in Collaborative Editing. +## How to perform scaling in Collaborative Editing. -### Role of Scaling in Collaborative editing -As the number of users increases, collaborative application face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources. +### Role of scaling in Collaborative Editing +As the number of users increases, collaborative editing applications face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources. -During scaling the users may connected to different servers, so collaborative editing application introduces a specific challenge like, updating the edit operations to all the users connected in different serves. To overcome this issue you need to use ``` Redis Cache pub/sub ``` for message relay(syncing the editing operations to the users connected to different server instance) +During scaling, users may be connected to different servers, so collaborative editing applications introduce a specific challenge: updating the edit operations to all the users connected in different servers. To overcome this issue, you need to use ``` Redis Cache pub/sub ``` for message relay (syncing the editing operations to the users connected to different server instances). ### Use of Redis Pub/Sub in scaling environment -Redis offers Pub/Sub functionality. The publish/subscribe (pub/sub) pattern provides asynchronous communication among multiple AWS services without creating interdependency. When a user edits a document, the application can publish the changes to a Redis channel. Clients (in different server instances) subscribed to that channel receive real-time updates, reflecting the changes in their document views. +Redis offers Pub/Sub functionality. The publish/subscribe (pub/sub) pattern provides asynchronous communication among multiple application instances without creating interdependency. When a user edits a document, the application can publish the changes to a Redis channel. Clients (in different server instances) subscribed to that channel receive real-time updates, reflecting the changes in their document views. ### Steps to configure Redis in Collaborative Editing Application Refer to the below steps to know about the Redis pub/sub implementation to sync the messages. @@ -340,25 +342,25 @@ spring.datasource.redisport= "" Publish each editing operation to Redis channel with the room name. This will send notifications to all the users(in different servers) subscribed to that specific channel. Refer to the publishToRedis() method in DocumentEditorHub.Java for details. ```java -try (Jedis jedis = RedisSubscriber.jedisPool.getResource()) { -jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload)); - break; - } catch (JedisConnectionException e) { - } +try (Jedis jedis = RedisSubscriber.jedisPool.getResource()) { + jedis.publish("collaborativeediting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload)); +} catch (JedisConnectionException e) { + e.printStackTrace(); +} ``` #### Step 3: Subscribe to the specific channel using the Redis cache 'Subscribe' - Redis cache will be initialized and subscribe to the specific channel using the Redis cache 'Subscribe' option. This ensures that users in any server will get notified when an editing operation is published to the Redis cache using the onMessage() API. Refer to the code snippet in RedisSubscriber.Java for details. +Redis cache will be initialized and subscribed to the specific channel using the Redis cache 'Subscribe' option. This ensures that users in any server will be notified when an editing operation is published to the Redis cache using the onMessage() API. Refer to the code snippet in RedisSubscriber.Java for details. ```java @PostConstruct public void subscribeToInstanceChannel() { //Subscriber to `collaborativeediting` - String channel = "collaborativeedtiting"; + String channel = "collaborativeediting"; new Thread(() -> { JedisPoolConfig poolConfig = new JedisPoolConfig(); jedisPool = new JedisPool(poolConfig, REDIS_HOST, REDIS_PORT); - try (Jedis jedis = jedisPool.getResource()) { + try (Jedis jedis = jedisPool.getResource()) { jedis.subscribe(new JedisPubSub() { @Override public void onMessage(String channel, String message) { diff --git a/Document-Processing/Word/Word-Processor/vue/faq/sfdt-faqs.md b/Document-Processing/Word/Word-Processor/vue/faq/sfdt-faqs.md index 46e2538710..e237f9d03a 100644 --- a/Document-Processing/Word/Word-Processor/vue/faq/sfdt-faqs.md +++ b/Document-Processing/Word/Word-Processor/vue/faq/sfdt-faqs.md @@ -1,16 +1,16 @@ --- layout: post title: FAQs about SFDT in Vue DOCX Editor | Syncfusion -description: Learn all about FAQs on SFDT in the Syncfusion Vue DOCX Editor component, including its structure and usage. +description: Learn all about FAQs on SFDT in the Syncfusion Vue Document Editor component, including its structure and usage. control: SFDT format platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# FAQs about SFDT in Vue DOCX Editor +# FAQs about SFDT in Vue Document Editor -The frequently asked questions about SFDT in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) is listed below: +The frequently asked questions about SFDT in the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) are listed below: ## What is SFDT format? @@ -18,7 +18,7 @@ SFDT (Syncfusion Document Text) is a JSON-based representation of a DOCX documen ## Is it possible to modify SFDT? -It is not recommended to modify SFDT directly (either manually or programmatically). The format is designed for internal use by the Document Editor, and even small changes can break the document structure or cause unexpected behavior. +It is not recommended to modify SFDT directly (either manually or programmatically). The format is designed for internal use by the Document Editor, and even small changes can break the document structure, or cause unexpected behavior. ## What are the advantages of SFDT over DOCX? @@ -26,7 +26,7 @@ SFDT is optimized for web-based document editing scenarios. - It is lightweight and easier to process. -- As SFDT is a Base64 string by default, it can be stored directly in databases. +- SFDT can be serialized as a Base64 string, so it can be stored directly in databases. - Server-side dependencies are not required for loading and saving SFDT. @@ -34,9 +34,9 @@ SFDT is optimized for web-based document editing scenarios. SFDT is suitable in the following scenarios: -- Applications where documents are edited within the browser using the Document Editor, and the document state needs to be saved and reopened later in the same editor +- Applications where documents are edited within the browser using the Document Editor, and the document state needs to be saved and reopened later in the same editor. -- Use cases that require efficient storage in a database and quick reloading for further editing +- Use cases that require efficient storage in a database and quick reloading for further editing. ## Can SFDT be converted back to DOCX? diff --git a/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md b/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md index 4087c6c78d..9efdcf1e34 100644 --- a/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md +++ b/Document-Processing/Word/Word-Processor/vue/faq/unsupported-file-format.md @@ -1,29 +1,29 @@ --- layout: post -title: Unsupported file in Vue Document editor component | Syncfusion -description: Learn here all about Unsupported file in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Unsupported file in Vue DOCX Editor component | Syncfusion +description: Learn here all about Unsupported file in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more. control: Unsupported file platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Why Do I Get the Unsupported Warning Message When Opening a Document in Vue? +# Unsupported file format warning in Vue -If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor), it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning: -1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT. +If you receive the message "The file format you have selected isn't supported. Please choose a valid format." when opening a document in the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor), it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning: +1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT (Refer to the supported formats list below). 2. Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists. To avoid this warning, always use the recommended document formats and features supported by the Document Editor. Document Editor supports the following file formats: -• Word Document (*.docx) -• Syncfusion Document Text (*.sfdt) -• Plain Text (*.txt) -• Word Template (*.dotx) -• HyperText Markup Language (*.html) -• Rich Text Format (*.rtf) -• Word XML Document(*.xml) -• Word 97-2003 Template (*.dot) -• Word 97-2003 Document (*.doc) +* Word Document (*.docx) +* Syncfusion Document Text (*.sfdt) +* Plain Text (*.txt) +* Word Template (*.dotx) +* HyperText Markup Language (*.html) +* Rich Text Format (*.rtf) +* Word XML Document (*.xml) +* Word 97-2003 Template (*.dot) +* Word 97-2003 Document (*.doc) By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor. \ No newline at end of file