From fc8021f11b5a5edf764d5cb9828d6a0bcf25bf1d Mon Sep 17 00:00:00 2001 From: DhanushSekar Date: Tue, 10 Feb 2026 18:24:37 +0530 Subject: [PATCH 1/7] 1009275: Updated UG documentation using AI prompt --- .../Word-Processor/angular/getting-started.md | 201 +++++-- .../asp-net-core/getting-started-core.md | 18 +- .../asp-net-mvc/getting-started.md | 13 +- .../client-side-application.md | 3 +- .../server-side-application.md | 4 +- .../javascript-es5/getting-started.md | 548 +++++++++--------- .../javascript-es6/getting-started.md | 135 +++-- .../Word-Processor/react/getting-started.md | 219 +++++-- .../react/nextjs-getting-started.md | 41 +- 9 files changed, 721 insertions(+), 461 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/getting-started.md b/Document-Processing/Word/Word-Processor/angular/getting-started.md index 8512e6223..024ae4bc1 100644 --- a/Document-Processing/Word/Word-Processor/angular/getting-started.md +++ b/Document-Processing/Word/Word-Processor/angular/getting-started.md @@ -1,18 +1,18 @@ --- layout: post -title: Getting started with Angular Document editor component | Syncfusion -description: Checkout and learn about Getting started with Angular Document editor component of Syncfusion Essential JS 2 and more details. +title: Getting started with Angular Document Editor component | Syncfusion +description: Checkout and learn about Getting started with Angular Document Editor component of Syncfusion Essential JS 2 and more details. platform: document-processing control: Getting started documentation: ug domainurl: ##DomainURL## --- -# Getting started with Angular Document editor component +# Getting started with Angular Document Editor component This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the Document Editor component. -To get started quickly with DocumentEditor component using CLI, you can check the video below. +To get started quickly with Document Editor component using CLI, you can check the video below. {% youtube "https://www.youtube.com/watch?v=UHdjjR_BbQY" %} @@ -42,31 +42,31 @@ The list of dependencies required to use the Document Editor component in your a |-- @syncfusion/ej2-charts ``` -### Server side dependencies +### Server-side dependencies The Document Editor component requires server-side interactions for the following operations: * [Open file formats other than SFDT](./import#convert-word-documents-into-sfdt) * [Paste with formatting](./clipboard#paste-with-formatting) * [Restrict editing](./document-management) -* [SpellCheck](./spell-check) +* [Spell check](./spell-check) * [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) ->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions. +>Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions. -To know about server-side dependencies, please refer this [page](./web-services-overview). +For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page. -## Setup Angular Environment +## Setup Angular environment -You can use [Angular CLI](https://github.com/angular/angular-cli) to setup your Angular applications. To install Angular CLI use the following command. +You can use [Angular CLI](https://github.com/angular/angular-cli) to set up your Angular applications. To install Angular CLI, use the following command: ```bash npm install -g @angular/cli@16.0.1 ``` -## Create an Angular Application +## Create an Angular application -Start a new Angular application using below Angular CLI command. +Start a new Angular application using the Angular CLI command below: ```bash ng new my-app @@ -80,26 +80,25 @@ By default, it will create a CSS-based application. Next, navigate to the created project folder: -``` +```bash cd my-app ``` ## Adding Syncfusion® Document Editor package -All the available Essential® JS 2 packages are published in [`npmJs.com`](https://www.npmjs.com/~syncfusionorg) registry. +All available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry. -To install Document Editor component, use the following command. +To install the Document Editor component, use the following command: ```bash npm install @syncfusion/ej2-angular-documenteditor --save ``` -> The **--save** will instruct NPM to include the grid package inside of the **dependencies** section of the **package.json**. +>Note: The `--save` flag instructs npm to include the Document Editor package inside the dependencies section of the `package.json` file. ## Adding CSS reference -The following CSS files are available in **../node_modules/@syncfusion** package folder. -This can be referenced in [src/styles.css] using following code. +The following CSS files are available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/styles.css` file using the following code: ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -113,55 +112,59 @@ This can be referenced in [src/styles.css] using following code. @import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css'; ``` -## Adding Component +## Choosing a component -You can add `DocumentEditorContainer` Component with predefined toolbar and properties pane options or `DocumentEditor` component with customize options. +Syncfusion offers two Document Editor components with different feature sets: ->Note: 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). +* **DocumentEditorContainer**: A complete solution with a predefined toolbar, properties pane, and status bar for comprehensive document editing +* **DocumentEditor**: A customizable component where you build the UI according to your specific requirements -### DocumentEditorContainer Component +>Note: Starting from version `v19.3.0.x`, the text size measurement accuracy has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can [disable it to retain the pagination behavior of older versions](./how-to/disable-optimized-text-measuring) if needed. -DocumentEditorContainer is a predefined component which wraps DocumentEditor, Toolbar, Properties pane, and Status bar into a single component. And the toolbar and properties pane is used to view and modify the document in DocumentEditor thought public APIs available in it. +### DocumentEditorContainer component + +The DocumentEditorContainer is a predefined component that wraps the DocumentEditor, toolbar, properties pane, and status bar into a single component. The toolbar and properties pane allow users to view and modify documents through public APIs available in the DocumentEditor. #### Adding DocumentEditorContainer component -Modify the template in [src/app/app.component.ts] file to render the Document Editor Container component. -Add the Angular Document Editor Container by using `` selector in **template** section of the app.component.ts file. +Modify the template in the `src/app/app.component.ts` file to render the DocumentEditorContainer component. Add the Angular DocumentEditorContainer using the `` selector in the template section of the `app.component.ts` file: ```typescript - -import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor' +import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'; import { Component, OnInit } from '@angular/core'; import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; + @Component({ -imports: [ - DocumentEditorContainerModule + imports: [ + DocumentEditorContainerModule ], standalone: true, selector: 'app-root', - // specifies the template string for the DocumentEditorContainer component - template: ` `, + template: ` + `, providers: [ToolbarService] }) export class AppComponent implements OnInit { - ngOnInit(): void { } } - ``` -> 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. +>Important: 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. #### Run the DocumentEditorContainer application -The quick-start project is configured to compile and run the application in a browser. Use the following command to run the application. +The project is configured to compile and run the application in a browser. Use the following command to run the application: -```javascript +```bash ng serve --open ``` -DocumentEditorContainer output will be displayed as follows. +The DocumentEditorContainer output will be displayed as follows: {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -175,51 +178,114 @@ DocumentEditorContainer output will be displayed as follows. {% previewsample "/document-processing/samples/document-editor/angular/document-editor-container-cs2" %} -> 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. ->Note: If you see a license banner when running your application, it means that you need to obtain a license key and register it within the application in order to use Syncfusion components. You can find more information on how to obtain and register a license key on our [Licensing overview](https://ej2.syncfusion.com/angular/documentation/licensing/overview) page. +>Note: If you see a license banner when running your application, you need to obtain a license key and register it within the application to use Syncfusion components. For more information on how to obtain and register a license key, refer to the [Licensing overview](https://ej2.syncfusion.com/angular/documentation/licensing/overview) page. -### DocumentEditor Component +### DocumentEditor component -DocumentEditor 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. +The DocumentEditor component is used to create, view, and edit Word documents. With this component, you can customize the UI options based on your requirements to modify documents. #### Adding DocumentEditor component -Modify the template in [src/app/app.component.ts] file to render the Document Editor component. -Add the Angular Document Editor by using `` selector in `template` section of the app.component.ts file. +Modify the template in the `src/app/app.component.ts` file to render the DocumentEditor component. Add the Angular DocumentEditor using the `` selector in the template section of the `app.component.ts` file: ```typescript - -import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor' +import { DocumentEditorModule } from '@syncfusion/ej2-angular-documenteditor'; import { Component, OnInit } from '@angular/core'; +import { + PrintService, + SfdtExportService, + WordExportService, + TextExportService, + SelectionService, + SearchService, + EditorService, + ImageResizerService, + EditorHistoryService, + ContextMenuService, + OptionsPaneService, + HyperlinkDialogService, + TableDialogService, + BookmarkDialogService, + TableOfContentsDialogService, + PageSetupDialogService, + StyleDialogService, + ListDialogService, + ParagraphDialogService, + BulletsAndNumberingDialogService, + FontDialogService, + TablePropertiesDialogService, + BordersAndShadingDialogService, + TableOptionsDialogService, + CellOptionsDialogService, + StylesDialogService +} from '@syncfusion/ej2-angular-documenteditor'; + @Component({ -imports: [ - DocumentEditorContainerModule + imports: [ + DocumentEditorModule ], standalone: true, selector: 'app-root', - // specifies the template string for the DocumentEditorContainer component - template: ` ` + template: ` + `, + providers: [ + PrintService, + SfdtExportService, + WordExportService, + TextExportService, + SelectionService, + SearchService, + EditorService, + ImageResizerService, + EditorHistoryService, + ContextMenuService, + OptionsPaneService, + HyperlinkDialogService, + TableDialogService, + BookmarkDialogService, + TableOfContentsDialogService, + PageSetupDialogService, + StyleDialogService, + ListDialogService, + ParagraphDialogService, + BulletsAndNumberingDialogService, + FontDialogService, + TablePropertiesDialogService, + BordersAndShadingDialogService, + TableOptionsDialogService, + CellOptionsDialogService, + StylesDialogService + ] }) export class AppComponent implements OnInit { - ngOnInit(): void { } } - ``` -> 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. +>Important: 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. -#### Run the DocumentEditor application +#### Run the DocumentEditor application -The quick start project is configured to compile and run the application in a browser. Use the following command to run the application. +Use the following command to compile and run the application in a browser: -```javascript +```bash ng serve --open ``` -Output will be displayed as follows. +The DocumentEditor output will be displayed as follows: {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -233,14 +299,23 @@ Output will be displayed as follows. {% previewsample "/document-processing/samples/document-editor/angular/getting-started-cs1" %} -> 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. +## Next steps + +After successfully setting up the Document Editor component, explore these resources to enhance your implementation: +* [How to localize the Document Editor container](./global-local) +* [How to load a document by default](./how-to/open-default-document) +* [How to customize the toolbar](./how-to/customize-tool-bar) +* [How to resize the Document Editor component](./how-to/resize-document-editor) +* [How to add a save button to the DocumentEditorContainer toolbar](./how-to/add-save-button-in-toolbar) +## Troubleshooting -## Frequently Asked Questions +If you encounter issues during setup, consider the following: -* [How to localize the Document Editor container](./global-local). -* [How to load the document by default](./how-to/open-default-document). -* [How to customize tool bar](./how-to/customize-tool-bar). -* [How to resize Document editor component?](./how-to/resize-document-editor) -* [How to add a save button to the DocumentEditorContainer component toolbar](./how-to/add-save-button-in-toolbar). +* Ensure all dependencies are correctly installed by running `npm install` +* Verify that your Node.js and Angular CLI versions meet the minimum requirements +* Check that the CSS imports are correctly referenced in the `src/styles.css` file +* Clear the npm cache if dependency conflicts occur: `npm cache clean --force` +* For server-side functionality issues, verify your web service is properly configured and accessible +* If using Angular standalone components, ensure you're using Angular 14 or later \ No newline at end of file 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 8586de538..a4d081197 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 @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Syncfusion Document Editor Control -description: Checkout and learn about getting started with Document Editor control of Syncfusion Essential JS 2 and more details. +title: Getting Started with ASP.NET Core DocumentEditor Control | Syncfusion +description: Check out and learn about getting started with Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Getting Started Core documentation: ug @@ -18,6 +18,8 @@ This section briefly explains about how to include [ASP.NET Core DocumentEditor] ## Create ASP.NET Core web application with Razor pages +Create a new ASP.NET Core web application using one of the following methods: + * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) * [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/project-template) @@ -36,6 +38,7 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. ## Add Syncfusion® ASP.NET Core Tag Helper + Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. {% tabs %} @@ -84,9 +87,18 @@ Also, register the script manager `` at the end of `` in the A {% endhighlight %} {% endtabs %} +## Understanding component options + +Syncfusion offers two DocumentEditor components with different feature sets: + +* **DocumentEditor**: A customizable component where you build the UI according to your specific requirements +* **DocumentEditorContainer**: A complete solution with a predefined toolbar, properties pane, and status bar for comprehensive document editing + +This guide demonstrates both options. + ## Add ASP.NET Core DocumentEditor control -Now, add the Syncfusion® ASP.NET Core DocumentEditor tag helper in `~/Pages/Index.cshtml` page. +Add the Syncfusion® ASP.NET Core DocumentEditor tag helper in `~/Pages/Index.cshtml` page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} 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 a1c6382ff..d7767af27 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 @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with ASP.NET MVC DocumentEditor | Syncfusion -description: Checkout and learn about getting started with ASP.NET MVC DocumentEditor control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about getting started with ASP.NET MVC DocumentEditor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Getting Started documentation: ug @@ -73,7 +73,7 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% highlight cshtml tabtitle="~/_Layout.cshtml" %} -... + ... @Html.EJS().ScriptManager() @@ -81,6 +81,15 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% endhighlight %} {% endtabs %} +## Understanding component options + +Two DocumentEditor variants are available: + +* **DocumentEditor** — a customizable control for building a tailored UI. +* **DocumentEditorContainer** — a complete container that includes a predefined toolbar, properties pane, and status bar for quick integration. + +Choose the control that matches the required level of customization. + ## Add ASP.NET MVC DocumentEditor control Now, add the Syncfusion® ASP.NET MVC DocumentEditor control in `~/Views/Home/Index.cshtml` page. 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 43e8fd528..d349cd750 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 @@ -81,7 +81,6 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore {% endhighlight %} - {% endtabs %} N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. @@ -120,7 +119,7 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder. builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); -.... +.... {% endhighlight %} {% endtabs %} 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 38b32c76d..f266a91b0 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 @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages and component details. {% endtabcontent %} @@ -67,7 +67,6 @@ dotnet new blazorserver -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} ## Install Syncfusion® Blazor WordProcessor and Themes NuGet in the App @@ -85,7 +84,6 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore {% endhighlight %} - {% endtabs %} N> Syncfusion® Blazor components are available on [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. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md index b78bd554e..5473d2907 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md @@ -1,25 +1,27 @@ --- layout: post -title: Getting started with JavaScript (ES5) Document editor | Syncfusion -description: Checkout and learn about Getting started with JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more details. +title: Getting started with JavaScript (ES5) Document Editor | Syncfusion +description: Checkout and learn about Getting started with JavaScript (ES5) Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Getting started documentation: ug domainurl: ##DomainURL## --- -# Getting started in JavaScript (ES5) Document editor control +# Getting started with JavaScript (ES5) Document Editor control -The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework designed for compatibility with modern web browsers without requiring build tools or transpilation. ## Component Initialization -The Essential® JS 2 JavaScript components can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript components can be initialized using either of the following approaches: -* Using local script and style references in a HTML page. -* Using CDN link for script and style reference. +* Using local script and style references in an HTML page +* Using CDN links for script and style references -### Using local script and style references in a HTML page +### Using local script and style references + +This approach downloads and hosts the required files locally, providing better control over versioning and offline availability. **Step 1:** Create an app folder `app` for Essential® JS 2 JavaScript components. @@ -41,166 +43,167 @@ The Essential® JS 2 JavaScript components c **Step 4:** Create a HTML page (index.html) in `app` location and add the Essentials JS 2 script and style references. ```html - - - - Essential JS 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + Essential JS 2 Document Editor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` - **Step 5:** Now, add the `Div` element and initiate the **Essential® JS 2 DocumentEditor** component in the `index.html` by using following code ```html - - - - Essential JS 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + + Essential JS 2 Document Editor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- - + + ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +>Important: 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. **Step 6:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditor** component. **Step 7:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential® JS 2 DocumentEditorContainer** component in the `index.html` by using following code ```html - - - - Essential JS 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- - - + + + + Essential JS 2 Document Editor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + ``` > The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. @@ -209,6 +212,8 @@ Now, run the `index.html` in web browser, it will render the **Essential® JS 2 JavaScript components. **Step 2:** The Essential® JS 2 component's global scripts and styles are already hosted in the below CDN link formats. @@ -227,64 +232,66 @@ Now, run the `index.html` in web browser, it will render the **Essential - - - Essential JS 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -``` + + + Essential JS 2 Document Editor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +``` {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/es5-getting-started-cs1" %} @@ -296,66 +303,64 @@ Now, run the `index.html` in web browser, it will render the **Essential - Essential JS 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Essential JS 2 Document Editor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - -
- -
- + +
+ - ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. - {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/es5-getting-started-cs2" %} Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditorContainer** component. -## Server side dependencies +## Server-side dependencies The Document Editor component requires server-side interactions for the following operations: @@ -365,18 +370,33 @@ The Document Editor component requires server-side interactions for the followin * [Spell check](./spell-check) * [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) ->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions. +>Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions. + +### Configuring web services + +Refer to the [example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) to configure the web service and set the [serviceUrl](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#serviceurl). + +Syncfusion provides a predefined [Word Processor server Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) targeting ASP.NET Core 2.1 framework. You can directly pull this Docker image and deploy it on a server. You can also create your own Docker image by customizing the existing [Docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker). + +>Note: Starting from version `v19.3.0.x`, the accuracy of text size measurements has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can [disable it to retain the pagination behavior of older versions](./how-to/disable-optimized-text-measuring) if needed. + +## Next steps -Please refer the [example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) to configure the web service and set the [serviceUrl](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#serviceurl). +After successfully setting up the Document Editor component, explore these resources to enhance your implementation: -Syncfusion® provides a predefined [Word Processor server docker image](https://hub.docker.com/r/syncfusion/word-processor-server) targeting ASP.NET Core 2.1 framework. You can directly pull this docker image and deploy it in server on the go. You can also create own docker image by customizing the existing [docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker). +* [How to localize the Document Editor container](./global-local) +* [How to load a document by default](./how-to/open-default-document) +* [How to customize the toolbar](./how-to/customize-tool-bar) +* [How to resize the Document Editor component](./how-to/resize-document-editor) +* [How to add a save button to the DocumentEditorContainer toolbar](./how-to/add-save-button-in-toolbar) ->Note: Staring 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). +## Troubleshooting -## Frequently Asked Questions +If you encounter issues during setup, consider the following: -* [How to localize the Document Editor container](./global-local). -* [How to load the document by default](./how-to/open-default-document). -* [How to customize tool bar](./how-to/customize-tool-bar). -* [How to resize Document editor component?](./how-to/resize-document-editor) -* [How to add a save button to the DocumentEditorContainer component toolbar](./how-to/add-save-button-in-toolbar) \ No newline at end of file +* Ensure all script and style references are correctly loaded in the browser's developer console +* Verify that the HTML structure and element IDs match the JavaScript initialization code +* Check that the web server is properly serving the files (for local script approach) +* Confirm CDN links are accessible and not blocked by network policies +* For server-side functionality issues, verify the web service is properly configured and accessible +* Check browser compatibility - the component requires modern browsers with ES5 support \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md index 3ea38c3c9..8a7b5434a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md @@ -1,41 +1,40 @@ --- layout: post title: Getting started with JavaScript (ES6) Document editor control | Syncfusion -description: Checkout and learn about Getting started with JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more details. +description: Checkout and learn about Getting started with JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Getting started documentation: ug domainurl: ##DomainURL## --- -# Getting started in JavaScript (ES6) Document editor control +# Getting started with JavaScript (ES6) Document Editor control -This section briefly explains how to create a simple **Document editor** component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create a simple **Document Editor** component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application uses the latest version of [webpack-cli](https://webpack.js.org/api/cli#commands) integrated with `webpack.config.js` configuration. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). ## Dependencies -Following is the list of minimum dependencies required to use the Document Editor. +The following list shows the minimum dependencies required to use the Document Editor: ```javascript - |-- @syncfusion/ej2-documentEditor - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-compression - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-file-utils - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-office-chart - |-- @syncfusion/ej2-charts - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons - +|-- @syncfusion/ej2-documenteditor + |-- @syncfusion/ej2-base + |-- @syncfusion/ej2-buttons + |-- @syncfusion/ej2-calendars + |-- @syncfusion/ej2-compression + |-- @syncfusion/ej2-dropdowns + |-- @syncfusion/ej2-file-utils + |-- @syncfusion/ej2-inputs + |-- @syncfusion/ej2-navigations + |-- @syncfusion/ej2-office-chart + |-- @syncfusion/ej2-charts + |-- @syncfusion/ej2-popups + |-- @syncfusion/ej2-splitbuttons ``` -### Server side dependencies +### Server-side dependencies The Document Editor component requires server-side interactions for the following operations: @@ -45,13 +44,13 @@ The Document Editor component requires server-side interactions for the followin * [Spell check](./spell-check) * [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) ->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions. +>Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions. -To know about server-side dependencies, please refer this [page](./web-services-overview). +For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page. ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-): {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -61,7 +60,7 @@ git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quic {% endhighlight %} {% endtabs %} -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +After cloning the application in the `ej2-quickstart` folder, run the following command to navigate to the project directory: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -75,7 +74,7 @@ cd ej2-quickstart Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -99,44 +98,48 @@ The quickstart application is preconfigured to use the `Material` theme in the ` {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme/) section to know more about built-in themes and CSS reference for individual controls. +>Note: To learn more about built-in themes and CSS reference for individual controls, refer to the [themes](https://ej2.syncfusion.com/documentation/appearance/theme/) section. ## Adding component -You can add `DocumentEditorContainer` component with predefined toolbar and properties pane options or `DocumentEditor` component with customize options. +You can add either the DocumentEditorContainer component with predefined toolbar and properties pane options or the DocumentEditor component with customizable options. ->Note: 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). +>Note: Starting from version `v19.3.0.x`, the accuracy of text size measurements has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can [disable it to retain the pagination behavior of older versions](./how-to/disable-optimized-text-measuring) if needed. ### Document Editor component -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. +The Document Editor component is used to create, view, and edit Word documents. With this component, you can customize the UI options based on your requirements to modify documents. #### Adding Document Editor component -You can start adding Essential® JS 2 documenteditor component to the application. To get started, add the DocumentEditor component in `app.ts` and `index.html` files using the following code. +You can start adding the Essential® JS 2 Document Editor component to the application. Add the DocumentEditor component in the `app.ts` and `index.html` files using the following code. -Place the following code in the `app.ts`. +Place the following code in the `app.ts` file: {% tabs %} {% highlight ts tabtitle="app.ts" %} import { DocumentEditor } from '@syncfusion/ej2-documenteditor'; -// Initialize Document Editor component. -let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +// Initialize Document Editor component +let documenteditor: DocumentEditor = new DocumentEditor({ + isReadOnly: false, + height: '370px', + serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' +}); -// Enable all built in modules. +// Enable all built-in modules documenteditor.enableAllModules(); -// Render the Document Editor component. +// Render the Document Editor component documenteditor.appendTo('#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. +>Important: 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. -Now, add an HTML div element to act as the DocumentEditor element in `index.html` using the following code. +Add an HTML div element to act as the DocumentEditor element in the `index.html` file: {% tabs %} {% highlight html tabtitle="index.html" %} @@ -145,7 +148,7 @@ Now, add an HTML div element to act as the DocumentEditor element in `index.html - Essential JS 2 + Essential JS 2 Document Editor @@ -155,7 +158,7 @@ Now, add an HTML div element to act as the DocumentEditor element in `index.html - +
@@ -166,7 +169,7 @@ Now, add an HTML div element to act as the DocumentEditor element in `index.html #### Run the Document Editor application -The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application. +The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -176,7 +179,7 @@ npm start {% endhighlight %} {% endtabs %} -Document Editor output will be displayed as follows. +The Document Editor output will be displayed as follows: {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -191,13 +194,13 @@ Document Editor output will be displayed as follows. ### Document Editor Container component -Document Editor Container is a predefined component which wraps DocumentEditor, Toolbar, Properties pane, and Status bar into a single component. And the toolbar and properties pane is used to view and modify the document in DocumentEditor thought public APIs available in it. +The DocumentEditorContainer is a predefined component that wraps the DocumentEditor, toolbar, properties pane, and status bar into a single component. The toolbar and properties pane allow users to view and modify documents through public APIs available in the DocumentEditor. #### Adding Document Editor Container component -You can start adding Essential® JS 2 documenteditor container component to the application. To get started, add the DocumentEditorContainer component in `app.ts` and `index.html` files using the following code. +You can start adding the Essential® JS 2 documenteditor container component to the application. Add the DocumentEditorContainer component in the `app.ts` and `index.html` files using the following code. -Place the following code in the `app.ts`. +Place the following code in the `app.ts` file: {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -206,16 +209,20 @@ import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor DocumentEditorContainer.Inject(Toolbar); -let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '390px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({ + enableToolbar: true, + height: '390px', + serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' +}); documenteditor.appendTo('#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. +>Important: 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. -Now, add an HTML div element to act as the DocumentEditorContainer element in `index.html` using the following code. +Add an HTML div element to act as the DocumentEditorContainer element in the `index.html` file: {% tabs %} {% highlight html tabtitle="index.html" %} @@ -224,7 +231,7 @@ Now, add an HTML div element to act as the DocumentEditorContainer element in `i - Essential JS 2 + Essential JS 2 Document Editor @@ -234,7 +241,7 @@ Now, add an HTML div element to act as the DocumentEditorContainer element in `i - +
@@ -245,7 +252,7 @@ Now, add an HTML div element to act as the DocumentEditorContainer element in `i #### Run the Document Editor Container application -The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application. +The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -255,7 +262,7 @@ npm start {% endhighlight %} {% endtabs %} -DocumentEditorContainer output will be displayed as follows. +The DocumentEditorContainer output will be displayed as follows: {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -268,10 +275,24 @@ DocumentEditorContainer output will be displayed as follows. {% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/getting-started-cs2" %} -## Frequently Asked Questions +## Next steps + +After successfully setting up the Document Editor component, explore these resources to enhance your implementation: + +* [How to localize the Document Editor container](./global-local) +* [How to load a document by default](./how-to/open-default-document) +* [How to customize the toolbar](./how-to/customize-tool-bar) +* [How to resize the Document Editor component](./how-to/resize-document-editor) +* [How to add a save button to the DocumentEditorContainer toolbar](./how-to/add-save-button-in-toolbar) + +## Troubleshooting + +If you encounter issues during setup, consider the following: -* [How to localize the Document Editor container](./global-local). -* [How to load the document by default](./how-to/open-default-document). -* [How to customize tool bar](./how-to/customize-tool-bar). -* [How to resize Document editor component?](./how-to/resize-document-editor) -* [How to add a save button to the DocumentEditorContainer component toolbar](./how-to/add-save-button-in-toolbar) +* Ensure all dependencies are correctly installed by running `npm install` +* Verify that your Node.js version meets the minimum requirements (v14.15.0 or higher) +* Check that webpack is properly configured in the `webpack.config.js` file +* Clear the npm cache if dependency conflicts occur: `npm cache clean --force` +* Ensure the development server is running on the correct port (check console output) +* For server-side functionality issues, verify your web service is properly configured and accessible +* Check the browser console for any JavaScript errors or network issues \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md index 213bd894e..901b41ed6 100644 --- a/Document-Processing/Word/Word-Processor/react/getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with React Document editor component | Syncfusion -description: Checkout and learn about Getting started with React Document editor component of Syncfusion Essential JS 2 and more details. +title: Getting started with React Document Editor component | Syncfusion +description: Checkout and learn about Getting started with React Document Editor component of Syncfusion Essential JS 2 and more details. control: Getting started platform: document-processing documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Getting started with React Document Editor component -This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the DocumentEditor component. +This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the Document Editor component. To get started quickly with DocumentEditor component, you can check the video below. @@ -18,11 +18,11 @@ To get started quickly with DocumentEditor component, you can check the video be ## Prerequisites -[System requirements for Syncfusion® Document Editor](https://ej2.syncfusion.com/vue/documentation/system-requirements) +[System requirements for Syncfusion® Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) ## Dependencies -Following is the list of minimum dependencies required to use the document editor. +The following list shows the minimum dependencies required to use the Document Editor component: ```javascript |-- @syncfusion/ej2-react-documenteditor @@ -43,7 +43,7 @@ Following is the list of minimum dependencies required to use the document edito |-- @syncfusion/ej2-charts ``` -### Server side dependencies +### Server-side dependencies The Document Editor component requires server-side interactions for the following operations: @@ -53,29 +53,37 @@ The Document Editor component requires server-side interactions for the followin * [Spell check](./spell-check) * [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) ->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions. +>Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions. -To know about server-side dependencies, please refer this [page](./web-services-overview). +For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page. -## Setup for Local Development +## Setup for local development To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. > **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. -To create a new React application, run the following command. +### Create a new React application + +To create a new React application, run the following command: ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. + +### Set up TypeScript environment + +To set up a React application in a TypeScript environment, run the following commands: ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. + +### Set up JavaScript environment + +To set up a React application in a JavaScript environment, run the following commands: ```bash npm create vite@latest my-app -- --template react @@ -86,20 +94,20 @@ npm run dev ## Adding Syncfusion® packages -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. +All available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. -To install Document Editor component, use the following command +To install the Document Editor component, use the following command: -``` +```bash npm install @syncfusion/ej2-react-documenteditor --save ``` -> The --save will instruct NPM to include the Document Editor package inside of the **dependencies** section of the package.json. +>Note: The `--save` flag instructs npm to include the Document Editor package inside the dependencies section of the `package.json` file. ## Adding CSS reference -Add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.css**. +Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/App.css` file: ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -113,51 +121,60 @@ Add Document Editor component and its dependent component styles available in ** @import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css"; ``` -> To know about individual component CSS, please refer to -[Individual Component theme files](https://ej2.syncfusion.com/react/documentation/appearance/theme#referring-individual-control-theme) section. +>Note: To learn about individual component CSS files, refer to the [Individual Component theme files](https://ej2.syncfusion.com/react/documentation/appearance/theme#referring-individual-control-theme) section. + +## Choosing a component -## Adding Component +Syncfusion offers two Document Editor components with different feature sets: -You can add `DocumentEditorContainer` Component with predefined toolbar and properties pane options or `DocumentEditor` component with customize options. +* **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane for comprehensive document editing +* **DocumentEditor**: A customizable component where you build the UI according to your specific requirements ->Note: 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). +>Note: Starting from version `v19.3.0.x`, the text size measurement accuracy has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can [disable it to retain the pagination behavior of older versions](./how-to/disable-optimized-text-measuring) if needed. ### DocumentEditorContainer component -DocumentEditorContainer Component is used to create, view, and edit word document. You can use predefined toolbar and properties pane to view and modify word document. +The DocumentEditorContainer component provides a complete document editing experience with a predefined toolbar and properties pane, allowing users to create, view, and edit Word documents with minimal configuration. #### Adding DocumentEditorContainer component -Now, you can start adding DocumentEditorContainer component in the application. For getting started, add the DocumentEditorContainer component in `src/App.tsx` file using following code. - -Add the below code in the `src/App.tsx` to initialize the DocumentEditor. +Add the DocumentEditorContainer component to your application. In the `src/App.tsx` file, add the following code to initialize the component: {% raw %} ```ts import * as React from 'react'; import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; + DocumentEditorContainerComponent.Inject(Toolbar); + function App() { - return (); + return ( + + ); } -export default App +export default App; ``` -> 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. - {% endraw %} +>Important: 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. + #### Run the DocumentEditorContainer application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Run the following command in the console to start the development server: -``` +```bash npm run dev ``` -DocumentEditorContainer output will be displayed as follows. +The DocumentEditorContainer output will be displayed as follows: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -173,39 +190,123 @@ DocumentEditorContainer output will be displayed as follows. {% previewsample "/document-processing/code-snippet/document-editor/react/base-cs3" %} -> 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. - ### DocumentEditor component -The DocumentEditor Component is used to create, view, and edit Word documents. But here, you can customize the UI options based on your requirements to modify the document. +The DocumentEditor component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike DocumentEditorContainer, this component allows you to customize the UI options based on your specific requirements. #### Adding DocumentEditor component -Now, you can start adding DocumentEditor component in the application. For getting started, add the DocumentEditor component in `src/App.tsx` file using following code. - -Add the below code in the `src/App.tsx` to initialize the DocumentEditor. +Add the DocumentEditor component to your application. In the `src/App.tsx` file, add the following code to initialize the component with the required services: ```ts import * as React from 'react'; -import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor'; -DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog); +import { + DocumentEditorComponent, + Print, + SfdtExport, + WordExport, + TextExport, + Selection, + Search, + Editor, + ImageResizer, + EditorHistory, + ContextMenu, + OptionsPane, + HyperlinkDialog, + TableDialog, + BookmarkDialog, + TableOfContentsDialog, + PageSetupDialog, + StyleDialog, + ListDialog, + ParagraphDialog, + BulletsAndNumberingDialog, + FontDialog, + TablePropertiesDialog, + BordersAndShadingDialog, + TableOptionsDialog, + CellOptionsDialog, + StylesDialog +} from '@syncfusion/ej2-react-documenteditor'; + +DocumentEditorComponent.Inject( + Print, + SfdtExport, + WordExport, + TextExport, + Selection, + Search, + Editor, + ImageResizer, + EditorHistory, + ContextMenu, + OptionsPane, + HyperlinkDialog, + TableDialog, + BookmarkDialog, + TableOfContentsDialog, + PageSetupDialog, + StyleDialog, + ListDialog, + ParagraphDialog, + BulletsAndNumberingDialog, + FontDialog, + TablePropertiesDialog, + BordersAndShadingDialog, + TableOptionsDialog, + CellOptionsDialog, + StylesDialog +); + function App() { - return (); + return ( + + ); } -export default App + +export default App; ``` -> 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. +>Important: 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. #### Run the DocumentEditor application -The `create-vite-app` will pre-configure the project to compile and run the application in browser. Use the following command to run the application. +Run the following command to compile and start the application: -``` +```bash npm run dev ``` -Document Editor output will be displayed as follows. +The Document Editor output will be displayed as follows: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -221,12 +322,22 @@ Document Editor output will be displayed as follows. {% previewsample "/document-processing/code-snippet/document-editor/react/base-cs2" %} -> 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. +## Next steps + +After successfully setting up the Document Editor component, explore these resources to enhance your implementation: + +* [How to localize the Document Editor container](./global-local) +* [How to load a document by default](./how-to/open-default-document) +* [How to customize the toolbar](./how-to/customize-tool-bar) +* [How to resize the Document Editor component](./how-to/resize-document-editor) +* [How to add a save button to the DocumentEditorContainer toolbar](./how-to/add-save-button-in-toolbar) + +## Troubleshooting -## Frequently Asked Questions +If you encounter issues during setup, consider the following: -* [How to localize the Document Editor container](./global-local). -* [How to load the document by default](./how-to/open-default-document). -* [How to customize tool bar](./how-to/customize-tool-bar). -* [How to resize Document editor component](./how-to/resize-document-editor). -* [How to add a save button to the DocumentEditorContainer component toolbar](./how-to/add-save-button-in-toolbar) +* Ensure all dependencies are correctly installed by running `npm install` +* Verify that your Node.js version meets the minimum requirements +* Check that the CSS imports are correctly referenced in your project structure +* Clear the npm cache if dependency conflicts occur: `npm cache clean --force` +* For server-side functionality issues, verify your web service is properly configured and accessible 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 e848cd80b..afec18824 100644 --- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md @@ -42,9 +42,11 @@ yarn create next-app {% endhighlight %} {% endtabs %} -Using one of the above commands will lead you to set up additional configurations for the project as below: +Using one of the above commands will prompt you to configure additional settings for the project: -1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-documenteditor`. +### Define the project name + +Specify the name of the project directly. In this example, the project is named `ej2-nextjs-documenteditor`: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -54,7 +56,9 @@ Using one of the above commands will lead you to set up additional configuration {% endhighlight %} {% endtabs %} -2.Select the required packages. +### Select the required packages + +Choose the following configuration options: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -65,13 +69,15 @@ Using one of the above commands will lead you to set up additional configuration √ Would you like to use Tailwind CSS? ... `No` / Yes √ Would you like to use `src/` directory? ... No / `Yes` √ Would you like to use App Router? (recommended) ... No / `Yes` -√ Would you like to customize the default import alias? ... `No`/ Yes +√ Would you like to customize the default import alias? ... `No` / Yes Creating a new Next.js app in D:\ej2-nextjs-documenteditor. {% endhighlight %} {% endtabs %} -3.Once complete the above mentioned steps to create `ej2-nextjs-documenteditor`, navigate to the directory using the below command: +### 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" %} @@ -81,7 +87,7 @@ cd ej2-nextjs-documenteditor {% endhighlight %} {% endtabs %} -The application is ready to run with default settings. Now, let's add Syncfusion® components to the project. +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 @@ -124,13 +130,15 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th {% endhighlight %} {% endtabs %} -> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section. +>Note: 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 component +## Add Syncfusion® React Document Editor component -Follow the below steps to add the React Document Editor component to the Next.js project: +Follow these steps to add the React Document Editor component to the Next.js project: -1.Before adding the Document Editor component to your markup, import the Document Editor component in the **src/app/page.tsx** file. +### 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: {% tabs %} {% highlight ts tabtitle="page.tsx" %} @@ -141,20 +149,27 @@ import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react {% endhighlight %} {% endtabs %} -2.Then, define the Document Editor component in the **src/app/page.tsx** file, as shown below: +### Define the Document Editor component + +Define the Document Editor component in the `src/app/page.tsx` file, as shown below: {% tabs %} {% highlight ts tabtitle="page.tsx" %} 'use client' import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; + DocumentEditorContainerComponent.Inject(Toolbar); export default function Home() { return ( <>

Syncfusion React Document Editor Component

- + ) @@ -163,7 +178,7 @@ export default function Home() { {% 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. +>Important: 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. ## Run the application From 89cb7169d4b46d1831bffdfe0e8074f86bb30d16 Mon Sep 17 00:00:00 2001 From: DhanushSekar Date: Thu, 12 Feb 2026 11:51:55 +0530 Subject: [PATCH 2/7] 1009275: Updated UG documentation using AI prompt --- .../Word/Word-Processor/vue/getting-started-vue-3.md | 2 +- .../Word/Word-Processor/vue/getting-started.md | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) 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 765e06ce3..01249bdaa 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 @@ -1,7 +1,7 @@ --- layout: post title: Getting started vue 3 with Vue Document editor component | Syncfusion -description: Checkout and learn about Getting started vue 3 with Vue Document editor component of Syncfusion Essential JS 2 and more details. +description: Check out and learn about Getting started vue 3 with Vue Document Editor component of Syncfusion Essential JS 2 and more details. control: Getting started vue 3 platform: document-processing documentation: ug diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started.md b/Document-Processing/Word/Word-Processor/vue/getting-started.md index e979e87d8..f6d30ca8b 100644 --- a/Document-Processing/Word/Word-Processor/vue/getting-started.md +++ b/Document-Processing/Word/Word-Processor/vue/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Vue Document editor component | Syncfusion -description: Checkout and learn about Getting started with Vue Document editor component of Syncfusion Essential JS 2 and more details. +description: Checkout and learn about Getting started with Vue Document editor component of Syncfusion Essential JS 2 and more details. control: Getting started platform: document-processing documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Getting Started with the Vue DocumentEditor Component in Vue 2 -To get started quickly with the Vue DocumentEditor component, you can check the [video](https://www.syncfusion.com/tutorial-videos/vue/word-processor?title=getting-started-with-the-vue-word-processor). +To get started quickly with the Vue DocumentEditor component, view the getting-started video: https://www.syncfusion.com/tutorial-videos/vue/word-processor?title=getting-started-with-the-vue-word-processor This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion® Vue Document Editor component @@ -47,16 +47,17 @@ The Document Editor component requires server-side interactions for the followin * [Open file formats other than SFDT](./import#convert-word-documents-into-sfdt) * [Paste with formatting](./clipboard#paste-with-formatting) * [Restrict editing](./document-management) -* [SpellCheck](./spell-check) +* [Spell check](./spell-check) * [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) ->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions. +Note: If these features are not required, the component can be deployed as a client-side solution without server-side interactions. To know about server-side dependencies, please refer this [page](./web-services-overview). ## Setting up the Vue 2 project To generate a Vue 2 project using Vue-CLI, use the [vue create](https://cli.vuejs.org#getting-started) command. Follow these steps to install Vue CLI and create a new project: +Using npm (global Vue CLI): ```bash npm install -g @vue/cli @@ -65,7 +66,7 @@ cd quickstart npm run serve ``` -or +Or using Yarn (global Vue CLI): ```bash yarn global add @vue/cli @@ -89,6 +90,7 @@ This article uses the [Vue Document editor component](https://www.syncfusion.com ```bash npm install @syncfusion/ej2-vue-documenteditor --save ``` + or ```bash From 7bffe0efeaa8e4c77cde15d2fd8d7c1d7913d859 Mon Sep 17 00:00:00 2001 From: DhanushSekar Date: Thu, 12 Feb 2026 12:25:03 +0530 Subject: [PATCH 3/7] 1009275: Resolved CI failures --- .../Word/Word-Processor/javascript-es5/getting-started.md | 2 +- .../Word/Word-Processor/react/nextjs-getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md index 5473d2907..fa3cafb37 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Getting started with JavaScript (ES5) Document Editor control -The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework designed for compatibility with modern web browsers without requiring build tools or transpilation. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework designed for compatibility with modern web browsers without requiring build tools. ## Component Initialization 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 afec18824..0dd9a98be 100644 --- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md @@ -46,7 +46,7 @@ Using one of the above commands will prompt you to configure additional settings ### Define the project name -Specify the name of the project directly. In this example, the project is named `ej2-nextjs-documenteditor`: +Specify the name of the project directly. In this example, the project is named `ej2-next js-documenteditor`: {% tabs %} {% highlight bash tabtitle="CMD" %} From 447492ae5c06c5e08af3d9948246dec7f4d7e640 Mon Sep 17 00:00:00 2001 From: DhanushSekar Date: Thu, 12 Feb 2026 14:32:04 +0530 Subject: [PATCH 4/7] 1009275: resolved CI issue --- .../Word-Processor/asp-net-core/getting-started-core.md | 2 +- .../Word/Word-Processor/javascript-es6/getting-started.md | 6 +++--- .../Word/Word-Processor/react/nextjs-getting-started.md | 7 +++---- .../Word/Word-Processor/vue/getting-started-vue-3.md | 6 +++--- .../Word/Word-Processor/vue/getting-started.md | 8 ++++---- 5 files changed, 14 insertions(+), 15 deletions(-) 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 a4d081197..6b69506f5 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 @@ -21,7 +21,7 @@ This section briefly explains about how to include [ASP.NET Core DocumentEditor] Create a new ASP.NET Core web application using one of the following methods: * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) -* [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/project-template) +* [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) ## Install ASP.NET Core package in the application diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md index 8a7b5434a..be0b7bfcf 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with JavaScript (ES6) Document editor control | Syncfusion +title: JavaScript (ES6) Document Editor quick start | Syncfusion description: Checkout and learn about Getting started with JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more details. platform: document-processing control: Getting started @@ -86,7 +86,7 @@ npm install ## Import the Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: @@ -98,7 +98,7 @@ The quickstart application is preconfigured to use the `Material` theme in the ` {% endhighlight %} {% endtabs %} ->Note: To learn more about built-in themes and CSS reference for individual controls, refer to the [themes](https://ej2.syncfusion.com/documentation/appearance/theme/) section. +>Note: To learn more about built-in themes and CSS reference for individual controls, refer to the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section. ## Adding component 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 0dd9a98be..4d30d8f1f 100644 --- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md @@ -8,8 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- - -# Creating a Next.js Application Using Syncfusion® React Components +# 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. @@ -110,7 +109,7 @@ yarn add @syncfusion/ej2-react-documenteditor ## Import Syncfusion® CSS styles -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. +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. Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below: @@ -130,7 +129,7 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th {% endhighlight %} {% endtabs %} ->Note: 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. +>Note: 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 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 01249bdaa..6a035a59b 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started with Syncfusion® Document Editor Component in Vue 3 +# Getting Started with Syncfusion® Document Editor Component in Vue 3 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). @@ -99,7 +99,7 @@ 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. +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 `