From cee84d49e971b04630113a638b2edfb7837f283f Mon Sep 17 00:00:00 2001 From: Mohanaselvam Jothi Date: Fri, 24 Apr 2026 23:38:09 +0530 Subject: [PATCH 1/7] Added getting started pages --- .../Word-Processor/angular/getting-started.md | 196 ++------------- .../javascript-es5/getting-started.md | 191 ++------------- .../javascript-es6/getting-started.md | 161 ++----------- .../vue/getting-started-vue-3.md | 225 +++--------------- .../Word-Processor/vue/getting-started.md | 165 ++----------- 5 files changed, 107 insertions(+), 831 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/angular/getting-started.md b/Document-Processing/Word/Word-Processor/angular/getting-started.md index c90328de1d..8f9f8dfe49 100644 --- a/Document-Processing/Word/Word-Processor/angular/getting-started.md +++ b/Document-Processing/Word/Word-Processor/angular/getting-started.md @@ -1,16 +1,16 @@ --- 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 DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in an Angular application using the Syncfusion® Document Editor control to create and edit Word documents. platform: document-processing control: Getting started documentation: ug domainurl: ##DomainURL## --- -# Getting started with Angular Document editor component +# Getting Started with Angular DOCX Editor -This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the Document editor component. +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in an Angular application. To get started quickly with Document editor component using CLI, you can check the video below. @@ -20,37 +20,15 @@ To get started quickly with Document editor component using CLI, you can check t [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: - -```javascript -|-- @syncfusion/ej2-angular-documenteditor - |-- @syncfusion/ej2-angular-base - |-- @syncfusion/ej2-documenteditor - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-compression - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-file-utils - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons - |-- @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) -* [Spell check](./spell-check) -* [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX >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. @@ -84,9 +62,9 @@ Next, navigate to the created project folder: cd my-app ``` -## Adding Syncfusion® Document editor package +## Install the Syncfusion® Document Editor packages -All available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry. +The Syncfusion® DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/~syncfusionorg). To install the Document editor component, use the following command: @@ -94,8 +72,6 @@ To install the Document editor component, use the following command: npm install @syncfusion/ej2-angular-documenteditor --save ``` ->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 the `node_modules/@syncfusion` package folder. Reference these styles in the `src/styles.css` file using the following code: @@ -112,18 +88,7 @@ The following CSS files are available in the `node_modules/@syncfusion` package @import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css'; ``` -## Choosing a component - -* **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 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 - -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 +## Add the Syncfusion® Document Editor component 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: @@ -152,15 +117,16 @@ export class AppComponent implements OnInit { } ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or use the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service. +> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). -#### Run the DocumentEditorContainer application +## Run the application -The project is configured to compile and run the application in a browser. Use the following command to run the application: +Run the application using the following command: ```bash ng serve --open ``` +Open http://localhost:4200 in your browser to see the DocumentEditorContainer output displayed as shown below. The DocumentEditorContainer output will be displayed as follows: @@ -177,130 +143,4 @@ The DocumentEditorContainer output will be displayed as follows: {% previewsample "/document-processing/samples/document-editor/angular/document-editor-container-cs2" %} ->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 - -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 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 { 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: [ - DocumentEditorModule - ], - standalone: true, - selector: 'app-root', - 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/` 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 - -Use the following command to compile and run the application in a browser: - -```bash -ng serve --open -``` - -The DocumentEditor output will be displayed as follows: - -{% tabs %} -{% highlight ts tabtitle="app.component.ts" %} -{% include code-snippet/document-editor/angular/getting-started-cs1/src/app.component.ts %} -{% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/document-editor/angular/getting-started-cs1/src/main.ts %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/samples/document-editor/angular/getting-started-cs1" %} - -## Frequently Asked Questions - -* [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 +>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. \ No newline at end of file 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 51c65bfcc8..ef97d027e0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md @@ -1,16 +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) DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in a JavaScript application using the Syncfusion® Document Editor control to create and edit Word documents. platform: document-processing control: Getting started documentation: ug domainurl: ##DomainURL## --- -# Getting started with JavaScript (ES5) Document editor control +# Getting Started with JavaScript (ES5) Document Editor +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a JavaScript application. -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. +## Server-side dependencies + +The Document editor component requires server-side interactions for the following operations: + +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX + +>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. ## Component Initialization @@ -82,74 +93,8 @@ This approach downloads and hosts the required files locally, providing better c -``` -**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 Document editor - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -``` - -> 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 +**Step 5:** 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 @@ -206,7 +151,8 @@ This approach downloads and hosts the required files locally, providing better c ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). + Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditorContainer** component. @@ -228,76 +174,7 @@ This approach uses Content Delivery Network (CDN) links to reference the require > > Styles: [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-documenteditor/styles/material.css`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-documenteditor/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `app` location and add the CDN link references. 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 Document editor - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -``` - -{% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/es5-getting-started-cs1" %} - -**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditor** component. - -**Step 5:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential® JS 2 DocumentEditorContainer** component in the index.html by using following code. +**Step 5:** Create a HTML page (index.html) in `app` location and add the CDN link references. Now add the `Div` element and initiate the **Essential® JS 2 DocumentEditorContainer** component in the index.html by using following code. ```html @@ -358,32 +235,4 @@ This approach uses Content Delivery Network (CDN) links to reference the require {% 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 - -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) -* [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, 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. - -## Frequently Asked Questions - -* [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 +Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditorContainer** component. \ 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 fdec477217..a23ac45e1a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md @@ -1,48 +1,30 @@ --- layout: post -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. +title: Getting Started with JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in a TypeScript application using the Syncfusion® Document Editor control to create and edit Word documents. platform: document-processing control: Getting started documentation: ug domainurl: ##DomainURL## --- -# Getting started with JavaScript (ES6) Document editor control +# Getting Started with JavaScript (ES6) DOCX Editor + +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a TypeScript application. 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 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 - -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 -``` - -### 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) -* [Spell check](./spell-check) -* [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX >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. @@ -70,9 +52,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +## Install the Syncfusion® Document Editor packages -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 Syncfusion® DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/~syncfusionorg). 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: @@ -84,7 +66,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Adding CSS reference 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. @@ -98,105 +80,8 @@ 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. - -## Adding component - -You can add either the DocumentEditorContainer component with predefined toolbar and properties pane options or the DocumentEditor component with customizable options. - ->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 - -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 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` 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/' -}); - -// Enable all built-in modules -documenteditor.enableAllModules(); - -// 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/` 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. - -Add an HTML div element to act as the DocumentEditor element in the `index.html` file: - -{% tabs %} -{% highlight html tabtitle="index.html" %} - - - - - - Essential JS 2 Document editor - - - - - - - - - - -
- - - - -{% endhighlight %} -{% endtabs %} - -#### 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: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start - -{% endhighlight %} -{% endtabs %} - -The Document editor output will be displayed as follows: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/document-editor/javascript-es6/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/document-editor/javascript-es6/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/getting-started-cs1" %} - -### Document editor Container 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 Document editor Container component +## Add the Syncfusion® Document Editor component 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. @@ -220,7 +105,7 @@ documenteditor.appendTo('#DocumentEditor'); {% endhighlight %} {% endtabs %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or use the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service. +> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). Add an HTML div element to act as the DocumentEditorContainer element in the `index.html` file: @@ -250,9 +135,9 @@ Add an HTML div element to act as the DocumentEditorContainer element in the `in {% endhighlight %} {% endtabs %} -#### Run the Document editor Container application +## 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: +Run the application using the following command: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -273,12 +158,4 @@ The DocumentEditorContainer output will be displayed as follows: {% endhighlight %} {% endtabs %} -{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/getting-started-cs2" %} - -## Frequently Asked Questions - -* [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 +{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/getting-started-cs2" %} \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md index d9df5c6de7..a4d8868a2a 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,14 +1,16 @@ --- layout: post -title: Getting started vue 3 with Vue Document editor component | Syncfusion -description: Check out and learn about Getting started vue 3 with Vue Document editor component of Syncfusion Essential JS 2 and more details. +title: Getting Started Vue 3 with Vue DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in a Vue application using the Syncfusion® Document Editor control to create and edit Word documents. 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 Vue DOCX Editor Component in Vue 3 + +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Vue application. 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). @@ -20,6 +22,20 @@ The `Options API` is the traditional way of writing Vue.js components, where the [System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements) +## Server side dependencies + +The Document Editor component requires server-side interactions for the following operations: + +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX + +>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). + ## Set up the Vite project A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). To create a new Vite project, use one of the commands that are specific to either NPM or Yarn. @@ -78,14 +94,11 @@ or cd my-project yarn install ``` +## Install the Syncfusion® Document Editor packages -Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project. +The Syncfusion® DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/~syncfusionorg). -## Add Syncfusion® Vue packages - -Syncfusion® Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion® Vue components in the project, install the corresponding npm package. - -This article uses the [Vue Document editor component](https://www.syncfusion.com/vue-components/vue-word-processor) as an example. To use the Vue Document editor component in the project, the `@syncfusion/ej2-vue-documenteditor` package needs to be installed using the following command: +To install the Document editor component, use the following command: ```bash npm install @syncfusion/ej2-vue-documenteditor --save @@ -97,7 +110,7 @@ or yarn add @syncfusion/ej2-vue-documenteditor ``` -## Import Syncfusion® CSS styles +## Adding CSS reference You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project. @@ -121,190 +134,7 @@ In this article, `Material` theme is applied using CSS styles, which are availab {% endhighlight %} {% endtabs %} -> Document editor has different themes, please refer to [supported themes](https://ej2.syncfusion.com/vue/documentation/appearance/theme) section. - -## Adding Component - -> Starting from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](./how-to/disable-optimized-text-measuring). - -### Adding DocumentEditor component in the application - -Document editor Component is used to create, view and edit word documents. In this, you can customize the UI options based on your requirements to modify the document. - -You have completed all the necessary configurations needed for rendering the Syncfusion® Vue component. Now, you are going to add the Document editor component using following steps. - -Follow the below steps to add the Vue Document editor component using `Composition API` or `Options API`: - -**Step 1:** First, import and register the DocumentEditor component and its child directives in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% endtabs %} - -**Step 2:** Add the component definition in `template` section. - -{% tabs %} -{% highlight html tabtitle="~/src/App.vue" %} - - - -{% endhighlight %} -{% endtabs %} - -**Step 3:** Declare the bound properties `serviceUrl` in the `script` section. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - -{% endhighlight %} -{% endtabs %} - -> 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. - -**Step 4:** Summarizing the above steps, update the `src/App.vue` file with following code. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - - - - - -{% endhighlight %} -{% endtabs %} - -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. - -#### Running the DocumentEditor application - -Run the application using the following command. - -```bash -npm run dev -``` - -or - -```bash -yarn run dev -``` - -The output will appear as follows: - -![Output](./images/vue3-documenteditor-demo.png) - -### Adding DocumentEditorContainer component in the application +## Add the Syncfusion® Document Editor component Document editor Container Component is also used to create, view and edit word document. But here, you can use predefined toolbar and properties pane to view and modify word document. @@ -385,7 +215,6 @@ Follow the below steps to add the Vue DocumentEditorContainer component using `C {% endhighlight %} {% endtabs %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. **Step 4:** Summarizing the above steps, update the `src/App.vue` file with following code. @@ -461,11 +290,11 @@ Follow the below steps to add the Vue DocumentEditorContainer component using `C {% endhighlight %} {% endtabs %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). -#### Running the DocumentEditorContainer application +## Run the application -Run the application using the following command. +Run the application using the following command: ```bash npm run dev diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started.md b/Document-Processing/Word/Word-Processor/vue/getting-started.md index cc86783613..02bb845b93 100644 --- a/Document-Processing/Word/Word-Processor/vue/getting-started.md +++ b/Document-Processing/Word/Word-Processor/vue/getting-started.md @@ -1,54 +1,34 @@ --- 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. +title: Getting Started with Vue DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in a Vue application using the Syncfusion® Document Editor control to create and edit Word documents. control: Getting started platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Getting Started with the Vue DocumentEditor Component in Vue 2 +# Getting Started with Vue DOCX Editor Component in Vue 2 -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 +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Vue application. -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 +To get started quickly with the Vue DOCX Editor 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 DOCX Editor component ## Prerequisites [System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements) -## Dependencies - -The list of dependencies required to use the Document Editor component in your application is given below: - -```javascript -|-- @syncfusion/ej2-vue-documenteditor -|-- @syncfusion/ej2-vue-base - |-- @syncfusion/ej2-documenteditor - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-compression - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-file-utils - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons - |-- @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) -* [Spell check](./spell-check) -* [Save as file formats other than SFDT and DOCX](./saving-documents/server-side-export) +* Open file formats other than SFDT +* Paste with formatting +* Restrict editing +* Spell check +* Save as file formats other than SFDT and DOCX >Note: If these features are not required, the component can be deployed as a client-side solution without server-side interactions. @@ -81,11 +61,12 @@ When creating a new project, choose the option `Vue 2` from the menu. Once the `quickstart` project is set up with default settings, proceed to add Syncfusion® components to the project. -## Add Syncfusion® Vue packages -Syncfusion® packages are available at [`npmjs.com`](https://www.npmjs.com/search?q=ej2-vue). To use Vue components, install the required npm package. +## Install the Syncfusion® Document Editor packages + +The Syncfusion® DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/~syncfusionorg). -This article uses the [Vue Document editor component](https://www.syncfusion.com/vue-components/vue-wysiwyg-document-editor) as an example. Install the `@syncfusion/ej2-vue-documenteditor` package by running the following command: +To install the Document editor component, use the following command: ```bash npm install @syncfusion/ej2-vue-documenteditor --save @@ -97,7 +78,7 @@ or yarn add @syncfusion/ej2-vue-documenteditor ``` -## Import Syncfusion® CSS styles +## Adding CSS reference You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project. @@ -115,96 +96,7 @@ In this article, the `Material` theme is applied using CSS styles, which are ava @import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css"; ``` -> Document editor has different themes, please refer to [Supported themes](https://ej2.syncfusion.com/vue/documentation/appearance/theme) section. - -## Add Syncfusion® Vue component - -You can add `DocumentEditorContainer` component with predefined toolbar and properties pane options or `DocumentEditor` component with customize options. - -> 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). - -### DocumentEditor 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. - -#### Registering DocumentEditor Component - -You can register the Document editor component in your application by using the `Vue.use()`. - -Refer to the code example given below. - -```ts -import { DocumentEditorPlugin } from '@syncfusion/ej2-vue-documenteditor'; - -Vue.use(DocumentEditorPlugin); -``` - -> Registering `DocumentEditorPlugin` in vue, will register the Document Editor component along with its required child directives globally. - -#### Adding DocumentEditor Component - -Add the Vue Document editor by using `` selector in `