Skip to content

Task(1039726): Updated files in Vue DOCX Editor #3929

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VijayalakshmiGSF4561 wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Task(1039726): Updated files in Vue DOCX Editor #3929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c0f9d0
1039726: Updated files in Vue DOCX Editor
VijayalakshmiGSF4561 Jul 28, 2026
ed74de7
1039726: Updated collaborative editing for Vue DOCX Editor
VijayalakshmiGSF4561 Jul 28, 2026
a5d6f32
1039726: Updated Comments file in Vue DOCX Editor
VijayalakshmiGSF4561 Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions Document-Processing/Word/Word-Processor/vue/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Accessibility in Vue Document editor component | Syncfusion
description: Learn here all about Accessibility in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Accessibility in Vue DOCX Editor component | Syncfusion
description: Learn here all about Accessibility in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
control: Accessibility
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Accessibility in Vue Document editor component
# Accessibility in Vue DOCX Editor component

The accessibility compliance for the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component is outlined below.

Expand Down Expand Up @@ -38,13 +38,13 @@ The accessibility compliance for the [Vue DOCX Editor](https://www.syncfusion.co

## Keyboard interaction

Document editor supports [keyboard shortcuts](./keyboard-shortcut).
DOCX Editor supports [keyboard shortcuts](./keyboard-shortcut).

## Ensuring accessibility

The Document editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
The DOCX Editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.

The accessibility compliance of the Document editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the Document editor component with accessibility tools.
The accessibility compliance of the DOCX Editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the DOCX Editor component with accessibility tools.

{% previewsample "https://ej2.syncfusion.com/accessibility/wordprocessor.html" %}

Expand Down
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/vue/bookmark.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Bookmark in Vue Document editor component | Syncfusion
description: Learn here all about Bookmark in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Bookmark in Vue DOCX Editor component | Syncfusion
description: Learn here all about Bookmark in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
control: Bookmark
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Bookmark in Vue Document editor component
# Bookmark in Vue DOCX Editor component

Bookmark is a powerful tool that helps you 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.

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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 DOCX Editor component.

The following example code illustrates how to show or hide square brackets around bookmarked items.

Expand All @@ -89,7 +89,7 @@ this.$refs.container.ej2Instances.documentEditorSettings.showBookmarks = true;

## Bookmark Dialog

The following example shows how to open bookmark dialog in Document Editor.
The following example shows how to open bookmark dialog in DOCX Editor.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -104,7 +104,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 Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/links-and-bookmarks.html).
Explore how to insert and manage bookmarks in Word documents using the Vue DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/links-and-bookmarks.html).

## See Also

Expand Down
20 changes: 13 additions & 7 deletions Document-Processing/Word/Word-Processor/vue/chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Chart in Vue Document editor component | Syncfusion
description: Learn here all about Chart in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Chart in Vue DOCX Editor component | Syncfusion
description: Learn here all about Chart in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
control: Chart
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Chart in Vue Document editor component
# Chart in Vue DOCX Editor component

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides chart preservation support. Using Document Editor, you can see the chart reports from your Word document.
[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides chart preservation support. Using DOCX Editor, you can see the chart reports from your Word document.

The following example shows chart preservation in Document Editor.
The following example shows chart preservation in DOCX Editor.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -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 DOCX Editor:

* Scatter_Markers
* Bubble
* Area
Expand All @@ -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).
Explore how to preserve charts in Word documents using the Vue DOCX 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)
30 changes: 15 additions & 15 deletions Document-Processing/Word/Word-Processor/vue/clipboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
---
layout: post
title: Clipboard in Vue Document editor component | Syncfusion
description: Learn here all about Clipboard in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Clipboard in Vue DOCX Editor component | Syncfusion
description: Learn here all about Clipboard in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more.
control: Clipboard
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Clipboard in Vue Document editor component
# Clipboard in Vue DOCX Editor component

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) takes advantage of 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 document to system clipboard using built-in context menu of DOCX Editor. You can also do it programmatically using the following sample code.

```javascript
this.$refs.documenteditor.ej2Instances.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 document to system clipboard using built-in context menu of DOCX Editor. You can also do it programmatically using the following sample code.

```javascript
this.$refs.documenteditor.ej2Instances.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 browser limitations, you can paste contents from system clipboard as plain text in DOCX 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:
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.
* Clipboard paste will be overridden, and internally stored data that has formatted text will be pasted.
Refer to the following sample code.

```
<ejs-documenteditor ref="documenteditor" :enableLocalPaste='true' :enableEditor='true' :isReadOnly=false style="width: 100%;height: 100%;"></ejs-documenteditor>
```html
<ejs-documenteditor ref="documenteditor" :enableLocalPaste='true' :enableEditor='true' :isReadOnly='false' style="width: 100%;height: 100%;"></ejs-documenteditor>
```

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. Refer to the following sample code.
When local paste is enabled for a DOCX Editor instance, you can paste contents programmatically if the internal clipboard has stored data during last copy operation. Refer to the following sample code.

```javascript
this.$refs.documenteditor.ej2Instances.editor.pasteLocal();
Expand All @@ -54,16 +54,16 @@ When local paste is enabled for a Document Editor instance, you can paste conten

|**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.<br>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.<br>Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.|
|True |Allows to paste content that is copied from the same DOCX Editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside DOCX Editor component can’t be pasted.<br>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 DOCX Editor component using API and context menu options too.|
|False|Allows to paste content from system clipboard. Hence the content copied from both the DOCX Editor component and outside can be pasted.<br>Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.|

Note:
* 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.
* Copying content from DOCX Editor component and pasting outside will work properly in both cases.

## 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`](<https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core/>) by the web API service implementation. This library helps you to paste the system clipboard data with formatting.
DOCX Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in DOCX Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`](<https://www.nuget.org/packages/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.
Expand All @@ -74,7 +74,7 @@ This paste option appears as follows.

![Image](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

Expand Down
18 changes: 9 additions & 9 deletions Document-Processing/Word/Word-Processor/vue/collaborative-editing/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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)
Loading