diff --git a/Document-Processing/Word/Word-Processor/angular/getting-started.md b/Document-Processing/Word/Word-Processor/angular/getting-started.md index 8512e6223..c90328de1 100644 --- a/Document-Processing/Word/Word-Processor/angular/getting-started.md +++ b/Document-Processing/Word/Word-Processor/angular/getting-started.md @@ -1,7 +1,7 @@ --- 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. +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 @@ -10,19 +10,19 @@ domainurl: ##DomainURL## # 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. +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" %} ## Prerequisites -[System requirements for Syncfusion® Angular Document Editor](https://ej2.syncfusion.com/angular/documentation/system-requirement) +[System requirements for Syncfusion® Angular Document editor](https://ej2.syncfusion.com/angular/documentation/system-requirement) ## Dependencies -The list of dependencies required to use the Document Editor component in your application is given below: +The list of dependencies required to use the Document editor component in your application is given below: ```javascript |-- @syncfusion/ej2-angular-documenteditor @@ -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: +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 +## 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,57 @@ 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. +* **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 ->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 -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. +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. +> 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 +176,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. +> 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 +297,10 @@ 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. - - - ## Frequently Asked Questions -* [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). +* [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) \ 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..681efd4a8 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. +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,8 +18,10 @@ 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) +* [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 @@ -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,16 @@ Also, register the script manager `` at the end of `` in the A {% endhighlight %} {% endtabs %} +## Understanding component options + +* **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..3a872e328 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,13 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% endhighlight %} {% endtabs %} +## Understanding component options + +* **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. @@ -99,7 +106,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Get ## See also -* [How to localize the Document Editor container](./global-local). +* [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). 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..51c65bfcc 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. +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. ## 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. +> 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,68 +303,66 @@ 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: +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) @@ -365,18 +370,20 @@ 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 -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). +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 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). +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: 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). +>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. ## Frequently Asked Questions -* [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 +* [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) \ 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..fdec47721 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md @@ -1,43 +1,42 @@ --- 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. +title: Getting started with JavaScript (ES6) Document editor | 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 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 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: +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) @@ -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" %} @@ -87,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: @@ -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 -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 +#### 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. +> 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 - +
@@ -164,9 +167,9 @@ Now, add an HTML div element to act as the DocumentEditor element in `index.html {% endhighlight %} {% endtabs %} -#### Run the Document Editor application +#### 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" %} @@ -189,15 +192,15 @@ Document Editor output will be displayed as follows. {% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/getting-started-cs1" %} -### Document Editor Container component +### 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 +#### 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. +> 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 - +
@@ -243,9 +250,9 @@ Now, add an HTML div element to act as the DocumentEditorContainer element in `i {% endhighlight %} {% endtabs %} -#### Run the Document Editor Container application +#### 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" %} @@ -270,8 +277,8 @@ DocumentEditorContainer output will be displayed as follows. ## Frequently Asked Questions -* [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) +* [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) \ 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..130a532ef 100644 --- a/Document-Processing/Word/Word-Processor/react/getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/getting-started.md @@ -1,16 +1,16 @@ --- 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. +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 domainurl: ##DomainURL## --- -# Getting started with React Document Editor component +# 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,9 +43,9 @@ 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: +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) @@ -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,58 @@ 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. -## Adding Component +## Choosing a component -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 %} +> 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 +188,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. +> 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 +320,10 @@ 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. - ## Frequently Asked Questions -* [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) +* [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) 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..ca6d2f892 100644 --- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md @@ -1,15 +1,14 @@ --- layout: post title: React Document Editor getting started with Next.js | Syncfusion -description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project. +description: Integrate the Syncfusion React Document Editor into a Next.js application with step‑by‑step setup and usage. control: Next.js platform: document-processing 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. @@ -42,9 +41,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: + +### Define the project name -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`. +Specify the name of the project directly. In this example, the project is named `ej2-next js-documenteditor`: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -54,7 +55,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 +68,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 +86,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 @@ -104,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: @@ -124,13 +129,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. +> 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 +148,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 +177,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. +> 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 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..d9df5c6de 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,16 +1,16 @@ --- 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 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). +This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with a JavaScript environment and integrating the Syncfusion® Vue Document editor component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api). The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior. @@ -85,7 +85,7 @@ Now that `my-project` is ready to run with default settings, let's add Syncfusio Syncfusion® Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion® Vue components in the project, install the corresponding npm package. -This article uses the [Vue Document Editor component](https://www.syncfusion.com/vue-components/vue-word-processor) as an example. To use the Vue Document Editor component in the project, the `@syncfusion/ej2-vue-documenteditor` package needs to be installed using the following command: +This article uses the [Vue Document editor component](https://www.syncfusion.com/vue-components/vue-word-processor) as an example. To use the Vue Document editor component in the project, the `@syncfusion/ej2-vue-documenteditor` package needs to be installed using the following command: ```bash npm install @syncfusion/ej2-vue-documenteditor --save @@ -99,9 +99,9 @@ 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 `