From fb5aa95fd761f5f84d2fc94853a32c44e7f331ee Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Wed, 29 Apr 2026 12:37:42 +0530 Subject: [PATCH 1/4] 1023472: Resolved Automation failure --- .../Word/Word-Processor/react/getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md index 4dcda6a1a..424b211d4 100644 --- a/Document-Processing/Word/Word-Processor/react/getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/getting-started.md @@ -212,6 +212,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync {% endtabcontent %} +{% endtabcontents %} + ## Video tutorial To get started quickly with Document Editor component, you can check the video below. From 01e3beada33fd7e8fa8d842eb860b12f955a2bb6 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Wed, 29 Apr 2026 19:58:35 +0530 Subject: [PATCH 2/4] 1023472: Resolved Getting started feedbacks --- .../angular/how-to/optimize-sfdt.md | 2 +- ...-container-in-amazon-kubernetes-service.md | 4 +- ...-processor-server-docker-image-overview.md | 16 +- .../Word-Processor/angular/track-changes.md | 2 +- .../angular/web-services/java.md | 2 +- .../asp-net-core/getting-started-core.md | 4 +- .../asp-net-core/how-to/optimize-sfdt.md | 2 +- .../asp-net-core/track-changes.md | 2 +- .../asp-net-mvc/getting-started.md | 4 +- .../asp-net-mvc/how-to/optimize-sfdt.md | 2 +- .../asp-net-mvc/track-changes.md | 2 +- .../client-side-application.md | 8 +- .../server-side-application.md | 11 +- .../blazor/getting-started/web-app.md | 17 +- .../javascript-es5/how-to/optimize-sfdt.md | 2 +- ...-container-in-amazon-kubernetes-service.md | 4 +- ...-processor-server-docker-image-overview.md | 16 +- .../javascript-es5/track-changes.md | 2 +- .../javascript-es5/web-services/java.md | 2 +- .../javascript-es6/how-to/optimize-sfdt.md | 2 +- ...-container-in-amazon-kubernetes-service.md | 4 +- ...-processor-server-docker-image-overview.md | 16 +- .../javascript-es6/track-changes.md | 2 +- .../javascript-es6/web-services/java.md | 2 +- .../Word-Processor/react/getting-started.md | 6 +- .../react/how-to/optimize-sfdt.md | 2 +- .../react/nextjs-getting-started.md | 123 ++---- ...-container-in-amazon-kubernetes-service.md | 4 +- ...-processor-server-docker-image-overview.md | 16 +- .../Word-Processor/react/track-changes.md | 2 +- .../Word-Processor/react/web-services/java.md | 2 +- .../vue/getting-started-vue-3.md | 377 +++--------------- .../Word-Processor/vue/getting-started.md | 8 +- .../vue/how-to/optimize-sfdt.md | 2 +- ...-container-in-amazon-kubernetes-service.md | 4 +- ...-processor-server-docker-image-overview.md | 16 +- .../Word-Processor/vue/web-services/java.md | 2 +- .../src/app.component.ts | 21 +- .../getting-started-cs2/index.ts | 7 +- .../react/base-cs3/app/index.tsx | 9 +- .../vue/getting-started-cs3/app.vue | 1 + 41 files changed, 212 insertions(+), 520 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/angular/how-to/optimize-sfdt.md index c9e12ba41..540cca8b8 100644 --- a/Document-Processing/Word/Word-Processor/angular/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/angular/how-to/optimize-sfdt.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # How to optimize the SFDT file -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. Hence, the optimized SFDT file can't be directly manipulated as JSON string. diff --git a/Document-Processing/Word/Word-Processor/angular/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md b/Document-Processing/Word/Word-Processor/angular/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md index a8dd9cd9f..724db777c 100644 --- a/Document-Processing/Word/Word-Processor/angular/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md +++ b/Document-Processing/Word/Word-Processor/angular/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service +title: Deploy Syncfusion Document Editor in Amazon Kubernetes Service description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Document editor. control: How to deploy word processor server docker container in amazon kubernetes service platform: document-processing @@ -15,7 +15,7 @@ domainurl: ##DomainURL## * `AWS CLI`: Install the AWS Command Line Interface (CLI) on your local machine. * `Kubectl` : Install the Kubernetes command-line tool kubectl on your local machine. * `Docker`: Install Docker on your local machine. -* `Word Processor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. +* `Document Editor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. To deploy the Word Processor server docker image, need to follow the below process diff --git a/Document-Processing/Word/Word-Processor/angular/server-deployment/word-processor-server-docker-image-overview.md b/Document-Processing/Word/Word-Processor/angular/server-deployment/word-processor-server-docker-image-overview.md index 0c519e4d1..479003724 100644 --- a/Document-Processing/Word/Word-Processor/angular/server-deployment/word-processor-server-docker-image-overview.md +++ b/Document-Processing/Word/Word-Processor/angular/server-deployment/word-processor-server-docker-image-overview.md @@ -9,13 +9,13 @@ domainurl: ##DomainURL## --- # Word processor server docker image overview in Angular Document editor component -The Syncfusion® **Word Processor (also known as Document Editor)** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. +The Syncfusion® **Document Editor** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. -This Docker image is the predefined Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure. +This Docker image is the predefined Docker container of Syncfusion’s Document Editor backend. You can deploy it quickly to your infrastructure. -Word Processor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) +Document Editor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) -The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. +The Document Editor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. ## Prerequisites @@ -24,7 +24,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins * On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). * On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). -## How to deploy Word Processor Docker image +## How to deploy Document Editor Docker image **Step 1:** Pull the word-processor-server image from Docker Hub. @@ -53,9 +53,9 @@ services: docker-compose up ``` -Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Word Processor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. +Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Document Editor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. -**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started) +**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Document Editor control, refer to this [`getting started page.`](../getting-started) ## How to configure spell checker dictionaries path in Docker compose file @@ -175,4 +175,4 @@ export class AppComponent { } ``` -Refer to these getting started pages to create a Word Processor in [`Typescript`](../../javascript-es6/getting-started), [`React`](../../react/getting-started), [`Vue`](../../vue/getting-started), [`ASP.NET MVC`](../../asp-net-mvc/getting-started), [`ASP.NET Core`](../../asp-net-core/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). \ No newline at end of file +Refer to these getting started pages to create a DOCX Editor in [`Typescript`](../../javascript-es6/getting-started), [`React`](../../react/getting-started), [`Vue`](../../vue/getting-started), [`ASP.NET MVC`](../../asp-net-mvc/getting-started), [`ASP.NET Core`](../../asp-net-core/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/angular/track-changes.md b/Document-Processing/Word/Word-Processor/angular/track-changes.md index 95d9bc4b1..3c19079e1 100644 --- a/Document-Processing/Word/Word-Processor/angular/track-changes.md +++ b/Document-Processing/Word/Word-Processor/angular/track-changes.md @@ -107,7 +107,7 @@ In DocumentEditor, we have built-in review panel in which we have provided suppo ## Custom metadata along with author -The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. +The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Document Editor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. The following example code illustrates how to enable and update custom metadata for track changes revisions. diff --git a/Document-Processing/Word/Word-Processor/angular/web-services/java.md b/Document-Processing/Word/Word-Processor/angular/web-services/java.md index 267a6580a..1625adb55 100644 --- a/Document-Processing/Word/Word-Processor/angular/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/angular/web-services/java.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Java in Angular Document editor component -This page illustrates how to create web service in Java for the server-side dependent functionalities of Word Processor component a.k.a. Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. +This page illustrates how to create web service in Java for the server-side dependent functionalities of the Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. * Import Word Document * Paste with formatting diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md index 2d580a496..ccdaec951 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with ASP.NET Core DOCX Editor -Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET Core application. +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. ## Steps to create an ASP.NET Core DOCX Editor @@ -109,4 +109,4 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m ![ASP.NET Core DocumentEditor Control](images/documenteditor-control.png) -N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20Core%20Tag%20Helper%20Examples). \ No newline at end of file +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20Core%20Tag%20Helper%20Examples). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/asp-net-core/how-to/optimize-sfdt.md index 9475598a8..f422f6594 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/how-to/optimize-sfdt.md @@ -9,7 +9,7 @@ documentation: ug # How to optimize the SFDT file -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. Hence, the optimized SFDT file can't be directly manipulated as JSON string. diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md b/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md index f5aabcf5e..0c591d865 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md @@ -131,7 +131,7 @@ In DocumentEditor, we have built-in review panel in which we have provided suppo ## Custom metadata along with author -The Document Editor provides options to customize revisions using `revisionSettings`. The `customData` property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the `showCustomDataWithAuthor` property. +The Document Editor provides options to customize revisions using `revisionSettings`. The `customData` property allows you to attach additional metadata to tracked revisions in the Document Editor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the `showCustomDataWithAuthor` property. The following example code illustrates how to enable and update custom metadata for track changes revisions. diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md index 31153af66..eca08457c 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with ASP.NET MVC DOCX Editor -Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET MVC application. +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. ## Steps to create an ASP.NET MVC DOCX Editor @@ -102,4 +102,4 @@ Add the Syncfusion® ASP.NET MVC Document Ed Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC Document Editor control will be rendered in the default web browser. -N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20MVC%20Razor%20Examples). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20MVC%20Razor%20Examples). diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/optimize-sfdt.md index cd6550023..a99516ec6 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/optimize-sfdt.md @@ -9,7 +9,7 @@ documentation: ug # How to optimize the SFDT file -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. Hence, the optimized SFDT file can't be directly manipulated as JSON string. diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md index 5cdef0dff..54c915ca3 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md @@ -126,7 +126,7 @@ In DocumentEditor, we have built-in review panel in which we have provided suppo ## Custom metadata along with author -The Document Editor provides options to customize revisions using `revisionSettings`. The `customData` property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the `showCustomDataWithAuthor` property. +The Document Editor provides options to customize revisions using `revisionSettings`. The `customData` property allows you to attach additional metadata to tracked revisions in the Document Editor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the `showCustomDataWithAuthor` property. The following example code illustrates how to enable and update custom metadata for track changes revisions. diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md index 77dabde63..8cdc3dce2 100644 --- a/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md +++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md @@ -12,9 +12,9 @@ documentation: ug Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application. -## Steps to create a Blazor WASM DOCX Editor +## Steps to create a Blazor DOCX Editor in WASM -This section explains how to include the [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component in a Blazor WebAssembly (WASM) application using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) component in a Blazor WebAssembly (WASM) application using Visual Studio and Visual Studio Code. {% tabcontents %} @@ -28,7 +28,7 @@ This section explains how to include the [Blazor Document Editor](https://www.sy You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs). -### Install Syncfusion® Blazor Nuget packages +### Install Syncfusion® Blazor Document Editor packages To add **Blazor Document Editor** component in the application, follow the steps below. - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), @@ -74,7 +74,7 @@ cd BlazorApp {% endtabs %} -### Install Syncfusion® Blazor Nuget packages +### Install Syncfusion® Blazor Document Editor packages * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md index d09f25b18..469853abb 100644 --- a/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md +++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md @@ -11,9 +11,9 @@ documentation: ug Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor Server application. -## Steps to create a Blazor Server DOCX Editor +## Steps to create a Blazor DOCX Editor in Server -This section explains how to include the [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component in a Blazor Server app using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) component in a Blazor Server app using Visual Studio and Visual Studio Code. {% tabcontents %} @@ -27,13 +27,14 @@ This section explains how to include the [Blazor Document Editor](https://www.sy You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs). -### Install Syncfusion® Blazor Nuget packages +### Install Syncfusion® Blazor Document Editor packages To add **Blazor Document Editor** component in the application, follow the steps below. - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), - search and install the following packages - [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor) - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + Alternatively, use the following Package Manager commands. {% tabs %} @@ -71,7 +72,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -### Install Syncfusion® Blazor Nuget packages +### Install Syncfusion® Blazor Document Editor packages * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the terminal is at the project root directory where the `.csproj` file is located. @@ -140,6 +141,8 @@ Add the following stylesheet and script to the head section. The theme styleshee * For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file. +* For **.NET 8** Blazor Server app, include it in the **/App.razor** file. + ```html .... diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md index 87d06158a..cb363ee10 100644 --- a/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md +++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md @@ -10,8 +10,8 @@ documentation: ug Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application. -## Steps to create a Blazor Web App DOCX Editor -This section explains about how to include the [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +## Steps to create a Blazor DOCX Editor in Web App +This section explains about how to include the [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -27,11 +27,11 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating the Blazor Web App. -### Install Syncfusion® Blazor Nuget packages +### Install Syncfusion® Blazor Document Editor packages To add **Blazor Document Editor** component in the application, follow the steps below. - - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), - - search and install the following packages + - Open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), + - Search and install the following packages - [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor) - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) @@ -46,8 +46,6 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor DOCX Editor are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} {% tabcontent Visual Studio Code %} @@ -74,11 +72,10 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -### Install Syncfusion® Blazor Nuget packages +### Install Syncfusion® Blazor Document Editor packages -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor DOCX Editor NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor Document Editor NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the terminal is in the project root directory where the `.csproj` file is located. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/optimize-sfdt.md index 6bb11f63b..a6a51e6a2 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/optimize-sfdt.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Optimize sfdt in JavaScript (ES5) Document editor control -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. Hence, the optimized SFDT file can't be directly manipulated as JSON string. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md b/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md index 2e1c2cb6c..5e11a50e7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service +title: Deploy Syncfusion Document Editor in Amazon Kubernetes Service description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Document editor. platform: document-processing control: How to deploy word processor server docker container in amazon kubernetes service @@ -15,7 +15,7 @@ domainurl: ##DomainURL## * `AWS CLI`: Install the AWS Command Line Interface (CLI) on your local machine. * `Kubectl` : Install the Kubernetes command-line tool kubectl on your local machine. * `Docker`: Install Docker on your local machine. -* `Word Processor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. +* `Document Editor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. To deploy the Word Processor server docker image, need to follow the below process diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/word-processor-server-docker-image-overview.md b/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/word-processor-server-docker-image-overview.md index 2d7632562..554e0ace0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/word-processor-server-docker-image-overview.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/server-deployment/word-processor-server-docker-image-overview.md @@ -9,13 +9,13 @@ domainurl: ##DomainURL## --- # Word processor server docker image overview in JavaScript (ES5) Document editor control -The Syncfusion® **Word Processor (also known as Document Editor)** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. +The Syncfusion® **Document Editor** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. -This Docker image is the predefined Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure. +This Docker image is the predefined Docker container of Syncfusion’s Document Editor backend. You can deploy it quickly to your infrastructure. -Word Processor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) +Document Editor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) -The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. +The Document Editor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. ## Prerequisites @@ -23,7 +23,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins * On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). * On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). -## How to deploy Word Processor Docker image +## How to deploy Document Editor Docker image **Step 1:** Pull the word-processor-server image from Docker Hub. @@ -52,9 +52,9 @@ docker pull syncfusion/word-processor-server docker-compose up ``` -Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Word Processor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. +Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Document Editor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. -**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started) +**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Document Editor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started) ``` @@ -227,4 +227,4 @@ container.created = function () { container.appendTo('#container'); ``` -Refer to these getting started pages to create a Word Processor in [`Angular`](../../angular/getting-started), [`React`](../../react/getting-started), [`Vue`](../../vue/getting-started), [`ASP.NET MVC`](../../asp-net-mvc/getting-started), [`ASP.NET Core`](../../asp-net-core/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). +Refer to these getting started pages to create a DOCX Editor in [`Angular`](../../angular/getting-started), [`React`](../../react/getting-started), [`Vue`](../../vue/getting-started), [`ASP.NET MVC`](../../asp-net-mvc/getting-started), [`ASP.NET Core`](../../asp-net-core/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md b/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md index 10cc2f294..0458ffebf 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md @@ -125,7 +125,7 @@ container.documentEditor.selection.navigatePreviousRevision(); ``` ## Custom metadata along with author -The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. +The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Document Editor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. The following example code illustrates how to enable and update custom metadata for track changes revisions. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md index 834b0ba8b..e7150f521 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/web-services/java.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Java in JavaScript (ES5) Document editor control -This page illustrates how to create web service in Java for the server-side dependent functionalities of Word Processor component a.k.a. Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. +This page illustrates how to create web service in Java for the server-side dependent functionalities of the Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. * Import Word Document * Paste with formatting diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md index 1dede8151..07150d009 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Optimize sfdt in JavaScript (ES6) Document editor control -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. Hence, the optimized SFDT file can't be directly manipulated as JSON string. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md b/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md index 2e1c2cb6c..5e11a50e7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service +title: Deploy Syncfusion Document Editor in Amazon Kubernetes Service description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Document editor. platform: document-processing control: How to deploy word processor server docker container in amazon kubernetes service @@ -15,7 +15,7 @@ domainurl: ##DomainURL## * `AWS CLI`: Install the AWS Command Line Interface (CLI) on your local machine. * `Kubectl` : Install the Kubernetes command-line tool kubectl on your local machine. * `Docker`: Install Docker on your local machine. -* `Word Processor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. +* `Document Editor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. To deploy the Word Processor server docker image, need to follow the below process diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/word-processor-server-docker-image-overview.md b/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/word-processor-server-docker-image-overview.md index 242be21c1..f1aaea7a6 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/word-processor-server-docker-image-overview.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/server-deployment/word-processor-server-docker-image-overview.md @@ -9,13 +9,13 @@ domainurl: ##DomainURL## --- # Word processor server docker image overview in JavaScript (ES6) Document editor control -The Syncfusion® **Word Processor (also known as Document Editor)** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. +The Syncfusion® **Document Editor** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. -This Docker image is the predefined Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure. +This Docker image is the predefined Docker container of Syncfusion’s Document Editor backend. You can deploy it quickly to your infrastructure. -Word Processor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) +Document Editor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) -The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. +The Document Editor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. ## Prerequisites @@ -23,7 +23,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins * On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). * On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). -## How to deploy Word Processor Docker image +## How to deploy Document Editor Docker image **Step 1:** Pull the word-processor-server image from Docker Hub. @@ -52,9 +52,9 @@ docker pull syncfusion/word-processor-server docker-compose up ``` -Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Word Processor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. +Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Document Editor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. -**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started) +**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Document Editor control, refer to this [`getting started page.`](../getting-started) ``` @@ -227,4 +227,4 @@ container.created = function () { container.appendTo('#container'); ``` -Refer to these getting started pages to create a Word Processor in [`Angular`](https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/document-editor/getting-started), [`Vue`](https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started), [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). +Refer to these getting started pages to create a DOCX Editor in [`Angular`](https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/document-editor/getting-started), [`Vue`](https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started), [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md b/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md index ef7c58dce..d4c168708 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md @@ -170,7 +170,7 @@ In DocumentEditor, we have built-in review panel in which we have provided suppo ## Custom metadata along with author -The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. +The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Document Editor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. The following example code illustrates how to enable and update custom metadata for track changes revisions. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md index 2b4189e96..7acc0b30e 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/web-services/java.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Java in JavaScript (ES6) Document editor control -This page illustrates how to create web service in Java for the server-side dependent functionalities of Word Processor component a.k.a. Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. +This page illustrates how to create web service in Java for the server-side dependent functionalities of the Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. * Import Word Document * Paste with formatting diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md index 424b211d4..6daa70351 100644 --- a/Document-Processing/Word/Word-Processor/react/getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/getting-started.md @@ -104,7 +104,7 @@ Open http://localhost:3000 in your browser to run the application. The Document Editor is displayed as shown below. {% tabs %} -{% highlight ts tabtitle="app.tsx" %} +{% highlight ts tabtitle="App.tsx" %} {% include code-snippet/document-editor/react/base-cs3/app/index.tsx %} {% endhighlight %} {% endtabs %} @@ -198,10 +198,10 @@ npm run dev ``` Open http://localhost:3000 in your browser to run the application. -The Document Editor is displayed as shown below. +Output appears as follows. {% tabs %} -{% highlight ts tabtitle="app.jsx" %} +{% highlight ts tabtitle="App.jsx" %} {% include code-snippet/document-editor/react/base-cs3/app/index.jsx %} {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/react/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/react/how-to/optimize-sfdt.md index 4d7452631..eeab9e3c1 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/optimize-sfdt.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # How to optimize the SFDT file -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, +Starting from version v21.1.x, the SFDT file generated in Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, * File transfer between client and server through the internet gets faster. * The new optimized SFDT files require less storage space than the old SFDT files. Hence, the optimized SFDT file can't be directly manipulated as JSON string. diff --git a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md index ca6d2f892..4e39ac24f 100644 --- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md @@ -10,13 +10,11 @@ domainurl: ##DomainURL## # Getting started with React Document Editor in Next.js -This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Document Editor component. +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Next.js application. -## What is Next.js? +## Steps to create React DOCX Editor in Next.js -[Next.js](https://nextjs.org/) is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications. - -## Prerequisites +### Prerequisites Before getting started with the Next.js application, ensure the following prerequisites are met: @@ -24,45 +22,30 @@ Before getting started with the Next.js application, ensure the following prereq * The application is compatible with macOS, Windows, and Linux operating systems. -## Create a Next.js application +### Create a Next.js application To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn. {% tabs %} {% highlight bash tabtitle="NPM" %} -npx create-next-app@latest +npx create-next-app@latest ej2-nextjs-documenteditor +cd ej2-nextjs-documenteditor {% endhighlight %} {% highlight bash tabtitle="YARN" %} -yarn create next-app - -{% endhighlight %} -{% endtabs %} - -Using one of the above commands will prompt you to configure additional settings for the project: - -### Define the project name - -Specify the name of the project directly. In this example, the project is named `ej2-next js-documenteditor`: - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -√ What is your project named? » ej2-nextjs-documenteditor +yarn create next-app ej2-nextjs-documenteditor +cd ej2-nextjs-documenteditor {% endhighlight %} {% endtabs %} -### Select the required packages - -Choose the following configuration options: +Select the required options when prompted: {% tabs %} {% highlight bash tabtitle="CMD" %} -√ What is your project named? ... ej2-nextjs-documenteditor √ Would you like to use TypeScript? ... No / `Yes` √ Would you like to use ESLint? ... No / `Yes` √ Would you like to use Tailwind CSS? ... `No` / Yes @@ -74,25 +57,9 @@ Creating a new Next.js app in D:\ej2-nextjs-documenteditor. {% endhighlight %} {% endtabs %} -### Navigate to the project directory - -Once the above steps are complete, navigate to the project directory using the following command: - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -cd ej2-nextjs-documenteditor - -{% endhighlight %} -{% endtabs %} - -The application is ready to run with default settings. The next steps will add the Syncfusion Document Editor component to the project. - -## Install Syncfusion® React packages +### Install Syncfusion® React packages -Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. - -Here, the [React Document Editor component](https://www.syncfusion.com/react-components/react-word-processor) is used in the project. To install the React Document Editor component, use the following command: +The Syncfusion® Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -107,50 +74,32 @@ yarn add @syncfusion/ej2-react-documenteditor {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +### Add CSS reference -Syncfusion® React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme), which are available in the installed packages. It’s easy to adapt the Syncfusion® React components to match the style of your application by referring to one of the built-in themes. +Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below: {% tabs %} {% highlight css tabtitle="globals.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import "../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css"; +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css'; {% endhighlight %} {% endtabs %} -> To learn more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) section. - -## Add Syncfusion® React Document Editor component - -Follow these steps to add the React Document Editor component to the Next.js project: - -### Import the Document Editor component - -Before adding the Document Editor component to your markup, import the Document Editor component in the `src/app/page.tsx` file: +### Add Syncfusion® React Document Editor component -{% tabs %} -{% highlight ts tabtitle="page.tsx" %} - -'use client' -import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; -{% endhighlight %} -{% endtabs %} - -### Define the Document Editor component - -Define the Document Editor component in the `src/app/page.tsx` file, as shown below: +Add the Document Editor component to your application. In the `src/app/page.tsx` file, add the following code to initialize the component: {% tabs %} {% highlight ts tabtitle="page.tsx" %} @@ -162,24 +111,23 @@ DocumentEditorContainerComponent.Inject(Toolbar); export default function Home() { return ( - <>

Syncfusion React Document Editor Component

- - - - ) + + + ); } {% endhighlight %} {% endtabs %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or use the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service. +> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). -## Run the application +### Run the application To run the application, use the following command: @@ -195,6 +143,5 @@ yarn run dev {% endhighlight %} {% endtabs %} -To learn more about the functionality of the Document Editor component, refer to the [documentation](./feature-module.md). -> [View the NEXT.js Document Editor sample in the GitHub repository](https://github.com/SyncfusionExamples/ej2-nextjs-documenteditor). +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ej2-nextjs-documenteditor). diff --git a/Document-Processing/Word/Word-Processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md b/Document-Processing/Word/Word-Processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md index bb8985860..06b742050 100644 --- a/Document-Processing/Word/Word-Processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md +++ b/Document-Processing/Word/Word-Processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service +title: Deploy Syncfusion Document Editor in Amazon Kubernetes Service description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion React Document editor. control: How to deploy word processor server docker container in amazon kubernetes service platform: document-processing @@ -15,7 +15,7 @@ domainurl: ##DomainURL## * `AWS CLI`: Install the AWS Command Line Interface (CLI) on your local machine. * `Kubectl` : Install the Kubernetes command-line tool kubectl on your local machine. * `Docker`: Install Docker on your local machine. -* `Word Processor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. +* `Document Editor Docker Image`: Have a Docker image of the Word Processor server ready to deploy. To deploy the Word Processor server docker image, need to follow the below process diff --git a/Document-Processing/Word/Word-Processor/react/server-deployment/word-processor-server-docker-image-overview.md b/Document-Processing/Word/Word-Processor/react/server-deployment/word-processor-server-docker-image-overview.md index b73906e4c..558d17ab5 100644 --- a/Document-Processing/Word/Word-Processor/react/server-deployment/word-processor-server-docker-image-overview.md +++ b/Document-Processing/Word/Word-Processor/react/server-deployment/word-processor-server-docker-image-overview.md @@ -9,13 +9,13 @@ domainurl: ##DomainURL## --- # Word processor server docker image overview in React Document editor component -The Syncfusion® **Word Processor (also known as Document Editor)** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. +The Syncfusion® **Document Editor** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents. -This Docker image is the predefined Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure. +This Docker image is the predefined Docker container of Syncfusion’s Document Editor backend. You can deploy it quickly to your infrastructure. -Word Processor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) +Document Editor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) -The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. +The Document Editor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. ## Prerequisites @@ -24,7 +24,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins * On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). * On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). -## How to deploy Word Processor Docker image +## How to deploy Document Editor Docker image **Step 1:** Pull the word-processor-server image from Docker Hub. @@ -53,9 +53,9 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins docker-compose up ``` - Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Word Processor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. + Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Document Editor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response. -**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](../getting-started). +**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Document Editor control, refer to this [`getting started page.`](../getting-started). ## How to configure spell checker dictionaries path in Docker compose file @@ -178,4 +178,4 @@ ReactDOM.render(, document.getElementById('sample')); ``` -Refer to these getting started pages to create a Word Processor in [`Typescript`](../../javascript-es6/getting-started), [`Angular`](../../angular/getting-started), [`Vue`](../../vue/getting-started), [`ASP.NET MVC`](../../asp-net-mvc/getting-started), [`ASP.NET Core`](../../asp-net-core/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). \ No newline at end of file +Refer to these getting started pages to create a DOCX Editor in [`Typescript`](../../javascript-es6/getting-started), [`Angular`](../../angular/getting-started), [`Vue`](../../vue/getting-started), [`ASP.NET MVC`](../../asp-net-mvc/getting-started), [`ASP.NET Core`](../../asp-net-core/getting-started-core), and [`Blazor`](../../blazor/getting-started/server-side-application). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index 110315c28..df5fddd52 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -191,7 +191,7 @@ In DocumentEditor, we have built-in review panel in which we have provided suppo ## Custom metadata along with author -The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. +The Document Editor provides options to customize revisions using [`revisionSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [`customData`](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#customdata) property allows you to attach additional metadata to tracked revisions in the Document Editor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the [`showCustomDataWithAuthor`](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property. The following example code illustrates how to enable and update custom metadata for track changes revisions. diff --git a/Document-Processing/Word/Word-Processor/react/web-services/java.md b/Document-Processing/Word/Word-Processor/react/web-services/java.md index d82dc37d3..0d042b99d 100644 --- a/Document-Processing/Word/Word-Processor/react/web-services/java.md +++ b/Document-Processing/Word/Word-Processor/react/web-services/java.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Java in React Document editor component -This page illustrates how to create web service in Java for the server-side dependent functionalities of Word Processor component a.k.a. Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. +This page illustrates how to create web service in Java for the server-side dependent functionalities of the Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file. * Import Word Document * Paste with formatting diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md index d9df5c6de..a5ff3894f 100644 --- a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md +++ b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md @@ -12,382 +12,110 @@ domainurl: ##DomainURL## This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with a JavaScript environment and integrating the Syncfusion® Vue Document editor component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api). -The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior. +## Steps to create Vue DOCX Editor in Vue 3 -The `Options API` is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component's properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more. - -## Prerequisites +### Prerequisites [System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements) -## Set up the Vite project +### Create the Vite project A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). To create a new Vite project, use one of the commands that are specific to either NPM or Yarn. -```bash -npm create vite@latest -``` - -or - -```bash -yarn create vite -``` - -Using one of the above commands will lead you to set up additional configurations for the project as below: - -1.Define the project name: We can specify the name of the project directly. Let's specify the name of the project as `my-project` for this article. - -```bash -? Project name: » my-project -``` - -2.Select `Vue` as the framework. It will create a Vue 3 project. - -```bash -? Select a framework: » - Use arrow-keys. Return to submit. -Vanilla -> Vue - React - Preact - Lit - Svelte - Others -``` - -3.Choose `JavaScript` as the framework variant to build this Vite project using JavaScript and Vue. - -```bash -? Select a variant: » - Use arrow-keys. Return to submit. -> JavaScript - TypeScript - Customize with create-vue ↗ - Nuxt ↗ -``` - -4.Upon completing the steps to create the `my-project`, run the following command to install its dependencies: - -```bash -cd my-project -npm install -``` - -or - -```bash -cd my-project -yarn install -``` - -Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project. - -## Add Syncfusion® Vue packages - -Syncfusion® Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion® Vue components in the project, install the corresponding npm package. - -This article uses the [Vue Document editor component](https://www.syncfusion.com/vue-components/vue-word-processor) as an example. To use the Vue Document editor component in the project, the `@syncfusion/ej2-vue-documenteditor` package needs to be installed using the following command: - -```bash - npm install @syncfusion/ej2-vue-documenteditor --save -``` - -or - -```bash -yarn add @syncfusion/ej2-vue-documenteditor -``` - -## Import Syncfusion® CSS styles - -You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project. - -In this article, `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Document editor component and its dependents were imported into the ` +npm create vite@latest my-project {% endhighlight %} -{% endtabs %} - -> Document editor has different themes, please refer to [supported themes](https://ej2.syncfusion.com/vue/documentation/appearance/theme) section. - -## Adding Component - -> Starting from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](./how-to/disable-optimized-text-measuring). - -### Adding DocumentEditor component in the application - -Document editor Component is used to create, view and edit word documents. In this, you can customize the UI options based on your requirements to modify the document. - -You have completed all the necessary configurations needed for rendering the Syncfusion® Vue component. Now, you are going to add the Document editor component using following steps. - -Follow the below steps to add the Vue Document editor component using `Composition API` or `Options API`: - -**Step 1:** First, import and register the DocumentEditor component and its child directives in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight bash tabtitle="YARN" %} - +yarn create vite my-project {% endhighlight %} {% endtabs %} -**Step 2:** Add the component definition in `template` section. +Select the required options when prompted: {% tabs %} -{% highlight html tabtitle="~/src/App.vue" %} +{% highlight bash tabtitle="CMD" %} - +√ Select a framework … Vue +√ Select a variant … JavaScript {% endhighlight %} {% endtabs %} -**Step 3:** Declare the bound properties `serviceUrl` in the `script` section. +Install the project dependencies: {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - +cd my-project +npm install {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - +cd my-project +yarn install {% 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. +### Install Syncfusion® Vue packages -**Step 4:** Summarizing the above steps, update the `src/App.vue` file with following code. +The Syncfusion® DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-vue-documenteditor). {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - +{% highlight bash tabtitle="NPM" %} - - - +npm install @syncfusion/ej2-vue-documenteditor --save {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - +{% highlight bash tabtitle="YARN" %} - - - +yarn add @syncfusion/ej2-vue-documenteditor {% 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. - -#### Running the DocumentEditor application -Run the application using the following command. - -```bash -npm run dev -``` - -or - -```bash -yarn run dev -``` - -The output will appear as follows: - -![Output](./images/vue3-documenteditor-demo.png) - -### Adding DocumentEditorContainer component in the application +{% endtabs %} -Document editor Container Component is also used to create, view and edit word document. But here, you can use predefined toolbar and properties pane to view and modify word document. +### Add CSS reference -You have completed all the necessary configurations needed for rendering the Syncfusion® Vue component. Now, you are going to add the DocumentEditorContainer component using following steps. +Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. -Follow the below steps to add the Vue DocumentEditorContainer component using `Composition API` or `Options API`: - -**Step 1:** First, import and register the DocumentEditorContainer component and its child directives in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% endtabs %} - -**Step 2:** Add the component definition in `template` section. +Import the `Material` theme into the **src/App.vue** file and removed the existing styles in that file, as shown below: {% tabs %} {% highlight html tabtitle="~/src/App.vue" %} - + {% endhighlight %} {% endtabs %} -**Step 3:** Declare the bound properties `serviceUrl` in the `script` section. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - -{% endhighlight %} -{% endtabs %} +### Add the Syncfusion® Document Editor component -> 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. +You have completed all the necessary configurations needed for rendering the Syncfusion® Vue component. Now, you are going to add the DocumentEditorContainer component using following steps. -**Step 4:** Summarizing the above steps, update the `src/App.vue` file with following code. +Follow the below steps to add the Vue DocumentEditorContainer component using `Composition API` or `Options API`: {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -461,21 +189,24 @@ Follow the below steps to add the Vue DocumentEditorContainer component using `C {% 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 hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). + +### Run the application -#### Running the DocumentEditorContainer application +To run the application, use the following command: -Run the application using the following command. +{% tabs %} +{% highlight bash tabtitle="NPM" %} -```bash npm run dev -``` -or +{% endhighlight %} +{% highlight bash tabtitle="YARN" %} -```bash yarn run dev -``` + +{% endhighlight %} +{% endtabs %} The output will appear as follows: diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started.md b/Document-Processing/Word/Word-Processor/vue/getting-started.md index b7f6a7010..aaecda96e 100644 --- a/Document-Processing/Word/Word-Processor/vue/getting-started.md +++ b/Document-Processing/Word/Word-Processor/vue/getting-started.md @@ -65,9 +65,9 @@ yarn add @syncfusion/ej2-vue-documenteditor ### Add CSS reference -You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project. +Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. -In this article, the `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Document Editor component and its dependents were imported into the `