diff --git a/Document-Processing/Word/Word-Processor/vue/accessibility.md b/Document-Processing/Word/Word-Processor/vue/accessibility.md index 936562a8cf..16cdc9227a 100644 --- a/Document-Processing/Word/Word-Processor/vue/accessibility.md +++ b/Document-Processing/Word/Word-Processor/vue/accessibility.md @@ -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. @@ -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" %} diff --git a/Document-Processing/Word/Word-Processor/vue/bookmark.md b/Document-Processing/Word/Word-Processor/vue/bookmark.md index 45a7c8fc5b..4d97c46aff 100644 --- a/Document-Processing/Word/Word-Processor/vue/bookmark.md +++ b/Document-Processing/Word/Word-Processor/vue/bookmark.md @@ -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. @@ -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 DOCX Editor component. The following example code illustrates how to show or hide square brackets around bookmarked items. @@ -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)" %} @@ -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 diff --git a/Document-Processing/Word/Word-Processor/vue/chart.md b/Document-Processing/Word/Word-Processor/vue/chart.md index 6e7059f786..c10c7fab35 100644 --- a/Document-Processing/Word/Word-Processor/vue/chart.md +++ b/Document-Processing/Word/Word-Processor/vue/chart.md @@ -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)" %} @@ -25,9 +25,10 @@ The following example shows chart preservation in Document Editor. {% previewsample "/document-processing/code-snippet/document-editor/vue/chart-cs1" %} -# Supported Chart Types +## Supported Chart Types + +The following chart types are supported in DOCX 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 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) \ 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..0a2dd6b0f0 100644 --- a/Document-Processing/Word/Word-Processor/vue/clipboard.md +++ b/Document-Processing/Word/Word-Processor/vue/clipboard.md @@ -1,20 +1,20 @@ --- 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(); @@ -22,7 +22,7 @@ Copy a portion of document to system clipboard using built-in context menu of Do ## 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(); @@ -30,21 +30,21 @@ 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 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. -``` - +```html + ``` 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(); @@ -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.
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 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.
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.
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`]() 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`]() 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. @@ -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 diff --git a/Document-Processing/Word/Word-Processor/vue/comments.md b/Document-Processing/Word/Word-Processor/vue/comments.md index db0a4b2555..f8b07cc715 100644 --- a/Document-Processing/Word/Word-Processor/vue/comments.md +++ b/Document-Processing/Word/Word-Processor/vue/comments.md @@ -1,14 +1,14 @@ --- layout: post -title: Comments in Vue Document editor component | Syncfusion -description: Learn here all about Comments in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more. +title: Comments in Vue DOCX Editor component | Syncfusion +description: Learn here all about Comments in Syncfusion Vue DOCX Editor component of Syncfusion Essential JS 2 and more. control: Comments platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Comments in Vue Document editor component +# Comments in Vue DOCX Editor component [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI. @@ -17,13 +17,15 @@ domainurl: ##DomainURL## Comments can be inserted to the selected text. ```ts -this.$refs.documenteditor.ej2Instances.editor.insertComment('Test comment'); +this.$refs.container.ej2Instances.documentEditor.editor.insertComment('Test comment'); ``` ## Add a New Comment with Date, Author, and Status Comments can be inserted into the selected text with a specified date, author, and status [`insertComment`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertcomment). ```ts +import { CommentProperties } from '@syncfusion/ej2-documenteditor'; + // In this example, a comment with the text "Hello world" // is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM. // The isResolved status is set to false. @@ -39,8 +41,8 @@ let commentProperties: CommentProperties = { isResolved: false // The status of the comment; false indicates it is unresolved. }; -// Insert the comment with the specified properties into the document editor. -this.$refs.documenteditor.ej2Instances.editor.insertComment('Hello world', commentProperties); +// Insert the comment with the specified properties into the DOCX Editor. +this.$refs.container.ej2Instances.documentEditor.editor.insertComment('Hello world', commentProperties); ``` ## Add a Reply Comment with Date, Author, and Status @@ -63,15 +65,15 @@ let commentProperties: CommentProperties = { isResolved: false // The status of the comment; false indicates it is unresolved. }; -// Insert the comment with the specified properties into the document editor. -let comment: Comment = this.$refs.documenteditor.ej2Instances.editor.insertComment('Hello world', commentProperties); -// Insert a reply comment with specified properties into the Document Editor -this.$refs.documenteditor.ej2Instances.editor.insertReplyComment(comment.id, 'Hello world', commentProperties); +// Insert the comment with the specified properties into the DOCX Editor. +let comment: Comment = this.$refs.container.ej2Instances.documentEditor.editor.insertComment('Hello world', commentProperties); +// Insert a reply comment with specified properties into the DOCX Editor +this.$refs.container.ej2Instances.documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentProperties); ``` ## Get Comments -Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#getcomments). +DOCX Editor allows you to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#getcomments). ```ts //Get Comments in the document along with the properties author, date, status. @@ -84,21 +86,21 @@ Next and previous comments can be navigated using the below code snippet. ```ts //Navigate to next comment -this.$refs.documenteditor.ej2Instances.selection.navigateNextComment(); +this.$refs.container.ej2Instances.documentEditor.selection.navigateNextComment(); //Navigate to previous comment -this.$refs.documenteditor.ej2Instances.selection.navigatePreviousComment(); +this.$refs.container.ej2Instances.documentEditor.selection.navigatePreviousComment(); ``` ## Delete comment -Current comment can be deleted using [`deleteComment`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#deletecomment). +The current comment can be deleted using [`deleteComment`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#deletecomment). ```ts //Delete the current selected comment. this.$refs.container.ej2Instances.documentEditor.editor.deleteComment(); -//Get Comments in the document along with the properties author, date, status. +//Get comments before deletion. Refer to the Get Comments section above for details. let commentinfo: CommentInfo[] = this.$refs.container.ej2Instances.documentEditor.getComments(); //Delete the particular parent comments and all of its reply comments @@ -108,21 +110,23 @@ this.$refs.container.ej2Instances.documentEditor.editor.deleteComment(commentinf this.$refs.container.ej2Instances.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id); ``` -## Delete all comment +## Delete all comments All the comments in the document can be deleted using the below code snippet. ```ts -this.$refs.documenteditor.ej2Instances.editor.deleteAllComments(); +this.$refs.container.ej2Instances.documentEditor.editor.deleteAllComments(); ``` ## Protect the document in comments only mode -Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document. +To use the DOCX Editor component and its protection APIs, follow the [Getting Started](./getting-started) documentation to set up the component, then load a document before enforcing protection. + +DOCX Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user is allowed to add or edit comments alone in the document. -Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#stopprotection) API. +DOCX Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#stopprotection) APIs. -The following example code illustrates how to enforce and stop protection in Document editor container. +The following example code illustrates how to enforce and stop protection in Document Editor container. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -187,7 +191,7 @@ export default { {% endhighlight %} {% endtabs %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the DOCX Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. Comment only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane) @@ -199,7 +203,7 @@ Comment only protection can be enabled in UI by using [Restrict Editing pane](./ Mention support displays a list of items that users can select or tag from the suggested list. To use this feature, type the @ character in the comment box and select or tag the user from the suggestion list. -The following example illustrates how to enable mention support in the Document Editor +The following example illustrates how to enable mention support in the DOCX Editor ``` ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the DOCX Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. ## Events @@ -253,14 +255,14 @@ import { provide, ref } from 'vue'; const container = ref(null); let mentionData = [ - { "Name": "Mary Kate", "EmailId": "marry@company.com" }, + { "Name": "Mary Kate", "EmailId": "mary@company.com" }, { "Name": "Andrew James", "EmailId": "james@company.com" }, { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"} ]; provide('DocumentEditorContainer', [Toolbar]); const settings= { mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }} }; const beforeComment = function (args) { - if(args.type === "Delete" && container.value.ej2Instances.currentUser !== args.author){ + if(args.type === "Delete" && container.value.ej2Instances.documentEditor.currentUser !== args.author){ args.cancel = true; } } @@ -292,7 +294,7 @@ const beforeComment = function (args) {