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 c9e12ba41d..a8ffe70d2a 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 @@ -1,6 +1,6 @@ --- layout: post -title: Optimize the SFDT file in Angular Document editor component | Syncfusion +title: Optimize the SFDT file in Angular DOCX editor component | Syncfusion description: Learn here all about optimize the SFDT file in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. control: Optimize the SFDT file platform: document-processing @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# How to optimize the SFDT file +# Optimize the SFDT file in Angular Document editor component -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. @@ -53,7 +53,7 @@ export class AppComponent { Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% endhighlight %} 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 a8dd9cd9f3..821de79a2e 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,13 +1,13 @@ --- layout: post -title: Deploy Syncfusion Word Processor 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. +title: Deploy Angular DOCX Editor in Amazon Kubernetes Service +description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Angular Document editor. control: How to deploy word processor server docker container in amazon kubernetes service platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# How to deploy Word Processor server in Amazon Kubernetes Service +# Deploy Angular DOCX Editor in Amazon Kubernetes Service ## Prerequisites @@ -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 @@ -26,7 +26,7 @@ Lets us discuss briefly about the each process ## Push the Docker image to the Amazon Elastic Registry -**Step 1:** Dockerize the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server) +**Step 1:** Create the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server) ``` docker build -t 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 0c519e4d1c..782447f900 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 @@ -1,21 +1,21 @@ --- layout: post -title: Image overview in Angular Document editor component | Syncfusion +title: Docker Image overview in Angular DOCX editor component | Syncfusion description: Learn here all about Word processor server docker image overview in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Word processor server docker image overview documentation: ug domainurl: ##DomainURL## --- -# Word processor server docker image overview in Angular Document editor component +# Word processor server docker image overview in Angular DOCX editor -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 back end. 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 95d9bc4b1b..3c19079e1e 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 267a6580ac..c5be517c32 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 @@ -130,7 +130,7 @@ The following example code illustrates how to write a Web API for importing Word The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component. ->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library. +>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or TIFF format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library. The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document. 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 2d580a496b..ccdaec951f 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 9475598a87..faf22013d0 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 @@ -1,15 +1,15 @@ --- layout: post -title: Optimize the SFDT file in Document Editor Component +title: Optimize the SFDT file in DOCX Editor Component | Syncfusion description: Learn here all about optimize the SFDT file in Document Editor in Syncfusion Document Editor component of syncfusion and more. platform: document-processing control: Optimize the SFDT file documentation: ug --- -# How to optimize the SFDT file +# Optimize the SFDT file in Document Editor Component -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 f5aabcf5e6..0c591d8652 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 31153af665..eca08457c8 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 cd6550023f..7f5c53539c 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 @@ -1,15 +1,15 @@ --- layout: post -title: Optimize the SFDT file in ASP.NET MVC Document Editor Component +title: Optimize SFDT file in ASP.NET MVC DOCX Editor Component | Syncfusion description: Learn here all about optimize the SFDT file in Document Editor in Syncfusion ASP.NET MVC Document Editor component of syncfusion and more. platform: document-processing control: Optimize the SFDT file documentation: ug --- -# How to optimize the SFDT file +# Optimize the SFDT file in ASP.NET MVC Document Editor Component -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 5cdef0dff2..54c915ca3a 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 77dabde636..8cdc3dce23 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 d09f25b18e..469853abbb 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 87d06158ae..cb363ee102 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 6bb11f63b5..7555c4b688 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. @@ -27,14 +27,14 @@ As a backward compatibility to create older format SFDT files, refer the followi Client-side {% tabs %} -{% highlight js tabtitle="Component Declaration"%} +{% highlight js tabtitle="Component Declaration" %} var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer(); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight js tabtitle="Component Declaration"%} +{% highlight js tabtitle="Component Declaration" %} var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } }); {% endhighlight %} {% endtabs %} @@ -44,7 +44,7 @@ var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ do Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% endhighlight %} @@ -52,7 +52,7 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); sfdtDocument.OptimizeSfdt = false; string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); @@ -64,14 +64,14 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType, false); {% endhighlight %} {% endtabs %} @@ -89,7 +89,7 @@ To convert from older format SFDT from a new optimized SFDT file, refer the foll Client-side {% tabs %} -{% highlight js tabtitle="Component Declaration"%} +{% highlight js tabtitle="Component Declaration" %} var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } }); {% endhighlight %} {% endtabs %} @@ -99,7 +99,7 @@ var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ do Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { sfdtDocument = WordDocument.Load(docIODocument); sfdtDocument.OptimizeSfdt = false; @@ -113,7 +113,7 @@ using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimi Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt); String oldSfdt = WordProcessorHelper.load(docIODocument, false); {% endhighlight %} 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 2e1c2cb6ce..daa85d8656 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,13 +1,13 @@ --- layout: post -title: Deploy Syncfusion Word Processor 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. +title: Deploy Javascript (ES5) DOCX Editor in Amazon Kubernetes Service +description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Javascript (ES5) Document editor. platform: document-processing control: How to deploy word processor server docker container in amazon kubernetes service documentation: ug domainurl: ##DomainURL## --- -# How to deploy Word Processor server in Amazon Kubernetes Service +# Deploy Javascript (ES5) DOCX Editor in Amazon Kubernetes Service ## Prerequisites @@ -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 @@ -26,7 +26,7 @@ Lets us discuss briefly about the each process ## Push the Docker image to the Amazon Elastic Registry -**Step 1:** Dockerize the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server) +**Step 1:** Create the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server) ``` docker build -t 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 2d76325629..12c22546f3 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 @@ -1,21 +1,21 @@ --- layout: post -title: Overview in JavaScript (ES5) Document editor control | Syncfusion +title: Image overview in Javascript (ES5) DOCX editor component | Syncfusion description: Learn here all about Word processor server docker image overview in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Word processor server docker image overview documentation: ug domainurl: ##DomainURL## --- -# Word processor server docker image overview in JavaScript (ES5) Document editor control +# Word processor server docker image overview in JavaScript (ES5) DOCX editor -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 back end. 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 10cc2f2949..0458ffebf7 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 834b0ba8ba..bc6779e960 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 @@ -132,7 +132,7 @@ The following example code illustrates how to write a Web API for importing Word The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component. ->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library. +>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or TIFF format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library. The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document. 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 1dede81517..ccadf48da9 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. @@ -27,14 +27,14 @@ As a backward compatibility to create older format SFDT files, refer the followi Client-side {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} let container: DocumentEditorContainer = new DocumentEditorContainer(); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } }); {% endhighlight %} {% endtabs %} @@ -44,7 +44,7 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% endhighlight %} @@ -52,7 +52,7 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); sfdtDocument.OptimizeSfdt = false; string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); @@ -64,14 +64,14 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); Server-side Java {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType, false); {% endhighlight %} {% endtabs %} @@ -89,7 +89,7 @@ To convert from older format SFDT from a new optimized SFDT file, refer the foll Client-side {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } }); {% endhighlight %} {% endtabs %} @@ -99,7 +99,7 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { sfdtDocument = WordDocument.Load(docIODocument); sfdtDocument.OptimizeSfdt = false; @@ -113,7 +113,7 @@ using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimi Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt); String oldSfdt = WordProcessorHelper.load(docIODocument, false); {% endhighlight %} 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 2e1c2cb6ce..dfc06516d7 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,13 +1,13 @@ --- layout: post -title: Deploy Syncfusion Word Processor 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. +title: Deploy Javascript (ES6) DOCX Editor in Amazon Kubernetes Service +description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Javascript (ES6) Document editor. platform: document-processing control: How to deploy word processor server docker container in amazon kubernetes service documentation: ug domainurl: ##DomainURL## --- -# How to deploy Word Processor server in Amazon Kubernetes Service +# Deploy Javascript (ES6) DOCX Editor in Amazon Kubernetes Service ## Prerequisites @@ -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 242be21c12..8efa12b621 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 @@ -1,21 +1,21 @@ --- layout: post -title: Overview in JavaScript (ES6) Document editor control | Syncfusion +title: Image overview in Javascript (ES6) DOCX editor component | Syncfusion description: Learn here all about Word processor server docker image overview in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Word processor server docker image overview documentation: ug domainurl: ##DomainURL## --- -# Word processor server docker image overview in JavaScript (ES6) Document editor control +# Word processor server docker image overview in JavaScript (ES6) DOCX editor -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 back end. 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 ef7c58dce5..d4c168708a 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 2b4189e963..ffc72c31a6 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 @@ -132,7 +132,7 @@ The following example code illustrates how to write a Web API for importing Word The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component. ->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library. +>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or TIFF format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library. The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document. diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md index 424b211d48..6daa703513 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 4d74526312..fdebf413b8 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 @@ -1,6 +1,6 @@ --- layout: post -title: Optimize the SFDT file in React Document editor component | Syncfusion +title: Optimize the SFDT file in React DOCX editor component | Syncfusion description: Learn here all about optimize the SFDT file in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. control: Optimize the SFDT file platform: document-processing @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# How to optimize the SFDT file +# Optimize sfdt in React 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. @@ -27,14 +27,14 @@ As a backward compatibility to create older format SFDT files, refer the followi Client-side {% tabs %} -{% highlight c# tabtitle="Component Declaration"%} +{% highlight c# tabtitle="Component Declaration" %} {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} function App() { // Set optimize sfdt as false let settings = { @@ -55,7 +55,7 @@ function App() { Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% endhighlight %} @@ -63,7 +63,7 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); sfdtDocument.OptimizeSfdt = false; string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); @@ -75,14 +75,14 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType, false); {% endhighlight %} {% endtabs %} @@ -100,7 +100,7 @@ To convert from older format SFDT from a new optimized SFDT file, refer the foll Client-side {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} function App() { // Set optimize sfdt as false let settings = { @@ -121,7 +121,7 @@ function App() { Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { sfdtDocument = WordDocument.Load(docIODocument); sfdtDocument.OptimizeSfdt = false; @@ -135,7 +135,7 @@ using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimi Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt); String oldSfdt = WordProcessorHelper.load(docIODocument, false); {% endhighlight %} 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 ca6d2f8922..4e39ac24f3 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 bb89858603..13d2273fd8 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,13 +1,13 @@ --- layout: post -title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service +title: Deploy React DOCX 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 documentation: ug domainurl: ##DomainURL## --- -# How to deploy Word Processor server in Amazon Kubernetes Service +# Deploy React DOCX Editor in Amazon Kubernetes Service ## Prerequisites @@ -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 @@ -26,7 +26,7 @@ Lets us discuss briefly about the each process ## Push the Docker image to the Amazon Elastic Registry -**Step 1:** Dockerize the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server) +**Step 1:** Create the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server) ``` docker build -t 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 b73906e4cc..d014c2585d 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 @@ -1,21 +1,21 @@ --- layout: post -title: Image overview in React Document editor component | Syncfusion +title: Docker Image overview in React DOCX editor component | Syncfusion description: Learn here all about Word processor server docker image overview in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. control: Word processor server docker image overview platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Word processor server docker image overview in React Document editor component +# Word processor server docker image overview in React DOCX editor -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 back end. 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 @@ -115,7 +115,7 @@ services: - "6002:80" ``` -**Step 3:** For handling the personal dictionary, place an empty .dic file (e.g.,. customDict.dic file) in the data folder. +**Step 3:** For handling the personal dictionary, place an empty .dic file (e.g.,.customDict.dic file) in the data folder. **Step 4:** Provide the configured volume path to the environment variable like in the following in the 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 110315c28e..df5fddd523 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 d82dc37d39..0d042b99d8 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 d9df5c6de7..a5ff3894f1 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 b7f6a70104..aaecda96eb 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 `