diff --git a/Document-Processing/Word/Word-Processor/angular/getting-started.md b/Document-Processing/Word/Word-Processor/angular/getting-started.md index 883d635714..c5008b8ca2 100644 --- a/Document-Processing/Word/Word-Processor/angular/getting-started.md +++ b/Document-Processing/Word/Word-Processor/angular/getting-started.md @@ -16,6 +16,8 @@ domainurl: ##DomainURL## ### Prerequisites +Refer to the link below for the supported Node.js, Angular CLI, and browser versions before you begin. + [System requirements for Document Editor](https://ej2.syncfusion.com/angular/documentation/system-requirement) ### Setup Angular environment @@ -34,7 +36,7 @@ npm install -g @angular/cli ng new documenteditor-app ``` -**Step 2:** This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format. +**Step 2:** The command prompts you to configure settings like enabling Angular routing and choosing a stylesheet format. ```text ? Which stylesheet system would you like to use? @@ -45,7 +47,7 @@ ng new documenteditor-app Less [ http://lesscss.org ] ``` -In this guide, CSS is selected as the stylesheet format. +This guide selects CSS as the stylesheet format. **Step 3:** During project setup, when prompted for the server-side rendering (SSR) option, choose the appropriate configuration. @@ -104,7 +106,7 @@ The following CSS files are available in the `node_modules/@syncfusion` package ### Add the Document Editor component -Modify `src/app/app.ts` to render the Document Editor component by adding the Angular Document Editor selector in its template section. +Update `src/app/app.ts` to render the Document Editor component by adding the selector to its template. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -147,9 +149,9 @@ ng serve --open After the application starts, open the localhost URL shown in the terminal. The Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below. -![Output of Angular Document Editor](./images/angular_getting_started.png) +![Angular Document Editor with toolbar and an empty editable area](./images/angular_getting_started.png) -You can also explore the Document Editor interactively using the live sample below. +You can also explore the Document Editor interactively using the live sample. {% previewsample "/document-processing/samples/document-editor/angular/document-editor-container-cs2" %} @@ -179,9 +181,9 @@ N> If you don't require the above functionalities, you can deploy the component For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page. -N> Looking for the full Angular Docx Editor component overview, features, pricing, and documentation? Visit the [Angular Docx Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) page. +N> Looking for the full Angular DOCX Editor component overview, features, pricing, and documentation? Visit the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) page. ## See also - [Open a document](./import) - [Save a document](./export) -- [Collaborative Editing](./collaborative-editing/overview) +- [Collaborative editing](./collaborative-editing/overview) diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md index b33d4cfec2..a8ace7038d 100644 --- a/Document-Processing/Word/Word-Processor/react/getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/getting-started.md @@ -1,8 +1,8 @@ --- layout: post -title: Getting started with React DOCX Editor component | Syncfusion -description: Learn how to create a DOCX Editor in a React application using the Syncfusion® Document Editor control to create, edit, and view Word documents. -control: Getting started +title: Getting Started with React DOCX Editor component | Syncfusion +description: Learn how to create a DOCX Editor using React with the Syncfusion® Document Editor control to create, edit, and view Word documents. +control: Getting Started platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -10,17 +10,30 @@ domainurl: ##DomainURL## # Getting started with React DOCX Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-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 React application. +[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-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 using React. ## Steps to create a React DOCX Editor +Follow these steps to set up and run the React Document Editor. Click any step to jump directly to that section: + +* [Prerequisites](#prerequisites) +* [Create a new React application](#create-a-new-react-application) +* [Install the Document Editor packages](#install-the-document-editor-packages) +* [Register the license key](#register-the-license-key) +* [Add CSS reference](#add-css-reference) +* [Add the Document Editor component](#add-the-document-editor-component) +* [Run the application](#run-the-application) + {% tabcontents %} {% tabcontent TypeScript %} ### Prerequisites -[System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) +Before getting started with the React application, ensure the following prerequisites are met: + +* [Vite 5.x](https://vitejs.dev/) or later (Vite is used as the build tool when scaffolding the application). +* See the [System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) for the supported Node.js, React, browser, and operating system versions. ### Create a new React application @@ -31,17 +44,45 @@ npm create vite@latest documenteditor-app -- --template react-ts cd documenteditor-app ``` +**Launch and Test the Application** (recommended) before adding Syncfusion packages. Install dependencies and start the dev server to confirm the project runs correctly: + +```bash +npm install +npm run dev +``` + +Open the URL shown in the terminal (default: `http://localhost:5173/`) — you should see the default Vite + React welcome page. Stop the dev server with `Ctrl+C` before proceeding to the next step. + + ### Install the Document Editor packages -The Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). +The Document Editor package is published to npm and can be installed from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). To install the Document Editor component, use the following command: ```bash -npm install @syncfusion/ej2-react-documenteditor --save +npm install @syncfusion/ej2-react-documenteditor ``` +For the full compatibility matrix, see the [React supported versions](https://ej2.syncfusion.com/react/documentation/system-requirement#react-supported-versions) section of the System Requirements page. + +### Register the license key + +Syncfusion requires a license key to be registered for production use. Generate your license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register it in your app's entry file (`src/App.tsx`). + +Add the following line **before** any Syncfusion component is rendered: + +{% tabs %} +{% highlight js tabtitle="App.tsx" %} + +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY'); + +{% endhighlight %} +{% endtabs %} + ### Add CSS reference Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file. @@ -62,10 +103,21 @@ Add the Document Editor component and its dependent component styles available i {% endhighlight %} {% endtabs %} +Refer to the [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to learn about built-in themes and the different ways to refer to them in a React project. + +Vite supports `@import` of `node_modules` paths natively, so no additional CSS preprocessor configuration is required. Make sure that `src/index.css` is imported from your entry file `src/main.tsx` so the component styles are included in the build output. The default Vite template already includes this import. + +**CSS load order matters:** The `@import` statements are processed in the order they appear, and later styles take precedence over earlier ones when specificity is equal. The component import (`@syncfusion/ej2-react-documenteditor`) is listed last so that any of your own custom styles added below it will override the default theme. If you add your own styles, place them **after** these imports to ensure they apply correctly. + ### Add the Document Editor component Add the Document Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component: +**File roles:** +`src/main.tsx` is the application entry point (boots React and imports `index.css`); +`src/index.css` holds the global styles including the Syncfusion `@import`s from the previous step; +`src/App.tsx` is the root component where the Document Editor is rendered. + {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -79,13 +131,15 @@ DocumentEditorContainerComponent.Inject(Toolbar); function App() { return ( - + + ); } @@ -94,7 +148,18 @@ export default App; {% endhighlight %} {% endtabs %} -N> 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). +The following props are configured on `DocumentEditorContainerComponent` in the example above: + +| Property | Type | Description | +| --- | --- | --- | +| `id` | `string` | Sets the unique ID of the container element. | +| `height` | `string \| number` | Sets the height of the editor container (e.g., `"590px"`). | +| `serviceUrl` | `string` | URL of the server-side web service required for opening/saving non-SFDT formats, paste with formatting, restrict editing, and spell check. | +| `enableToolbar` | `boolean` | When `true`, shows the built-in toolbar. Set to `false` to hide it. | + +**Toolbar registration:** The `Inject(Toolbar)` call registers the toolbar service with the editor container so the built-in formatting toolbar is rendered. + +The hosted Web API URL shown above is for demo and evaluation purposes only. For production, or if the demo service is unavailable, deploy 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) and update the `serviceUrl` to point to it. ### Run the application @@ -104,6 +169,14 @@ Run the application using the following command: npm run dev ``` +To build the application for production, run: + +```bash +npm run build +``` + +This generates an optimized production build in the `dist/` folder. To preview the production build locally, run `npm run preview`. + {% endtabcontent %} {% tabcontent JavaScript %} @@ -111,7 +184,10 @@ npm run dev ### Prerequisites -[System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) +Before getting started with the React application, ensure the following prerequisites are met: + +* [Vite 5.x](https://vitejs.dev/) or later (Vite is used as the build tool when scaffolding the application). +* See the [System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) for the supported Node.js, React, browser, and operating system versions. ### Create a new React application @@ -122,18 +198,46 @@ npm create vite@latest documenteditor-app -- --template react cd documenteditor-app ``` +**Launch and Test the Application** (recommended) before adding Syncfusion packages. Install dependencies and start the dev server to confirm the project runs correctly: + +```bash +npm install +npm run dev +``` + +Open the URL shown in the terminal (default: `http://localhost:5173/`) — you should see the default Vite + React welcome page. Stop the dev server with `Ctrl+C` before proceeding to the next step. + ### Install the Document Editor packages -The Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). +The Document Editor package is published to npm and can be installed from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). To install the Document Editor component, use the following command: ```bash -npm install @syncfusion/ej2-react-documenteditor --save +npm install @syncfusion/ej2-react-documenteditor ``` -### Add CSS reference +For the full compatibility matrix, see the [React supported versions](https://ej2.syncfusion.com/react/documentation/system-requirement#react-supported-versions) section of the System Requirements page. + +### Register the license key + +Syncfusion requires a license key to be registered for production use. Generate your license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register it in your app's entry file (`src/App.jsx`). + +Add the following line **before** any Syncfusion component is rendered: + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} + +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY'); + +{% endhighlight %} +{% endtabs %} + + +### Add CSS referenc Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file: @@ -153,10 +257,17 @@ Add the Document Editor component and its dependent component styles available i {% endhighlight %} {% endtabs %} +N> Refer to [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a react project. + +Vite supports `@import` of `node_modules` paths natively, so no additional CSS preprocessor configuration is required. Make sure that `src/index.css` is imported from your entry file `src/main.jsx` so the component styles are included in the build output. The default Vite template already includes this import. + +**CSS load order matters:** The `@import` statements are processed in the order they appear, and later styles take precedence over earlier ones when specificity is equal. The component import (`@syncfusion/ej2-react-documenteditor`) is listed last so that any of your own custom styles added below it will override the default theme. If you add your own styles, place them **after** these imports to ensure they apply correctly. + ### Add the Document Editor component Add the Document Editor component to your application. In the `src/App.jsx` file, add the following code to initialize the component: +**File roles:** `src/main.jsx` is the application entry point (boots React and imports `index.css`); `src/index.css` holds the global styles including the Syncfusion `@import`s from the previous step; `src/App.jsx` is the root component where the Document Editor is rendered. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -167,6 +278,7 @@ DocumentEditorContainerComponent.Inject(Toolbar); function App() { return ( +
+
); } @@ -182,22 +295,44 @@ export default App; {% endhighlight %} {% endtabs %} -N> 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). +The following props are configured on `DocumentEditorContainerComponent` in the example above: + +| Property | Type | Description | +| --- | --- | --- | +| `id` | `string` | Sets the unique ID of the container element. | +| `height` | `string \| number` | Sets the height of the editor container (e.g., `"590px"`). | +| `serviceUrl` | `string` | URL of the server-side web service required for opening/saving non-SFDT formats, paste with formatting, restrict editing, and spell check. | +| `enableToolbar` | `boolean` | When `true`, shows the built-in toolbar. Set to `false` to hide it. | -### Run the application +**Toolbar registration:** The `Inject(Toolbar)` call registers the toolbar service with the editor container so the built-in formatting toolbar is rendered. + +N> The hosted Web API URL is for demo and evaluation purposes only. For production, or if the demo service is unavailable, deploy 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) and update the `serviceUrl` to point to it. + +### Run the application Run the application using the following command: ```bash npm run dev ``` + +To build the application for production, run: + +```bash +npm run build +``` + +This generates an optimized production build in the `dist/` folder. To preview the production build locally, run `npm run preview`. + {% endtabcontent %} {% endtabcontents %} -After the application starts, open the localhost URL shown in the terminal. The React Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below. +After the application starts, open the localhost URL shown in the terminal (default: `http://localhost:5173/`, or the next available port if `5173` is in use) in the browser. The React Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below. + +![React Document Editor with toolbar and an empty editable area](./images/react_getting_started.png) -![Output of React Document Editor](./images/react_getting_started.png) +*React Document Editor with the built-in toolbar and an empty editing area, rendered in the browser after `npm run dev`.* You can also explore the Document Editor interactively using the live sample below. @@ -217,7 +352,7 @@ To get started quickly with Document Editor component, you can check the video b ## Server-side dependencies -The Document Editor component requires server-side interactions for the following operations: +The Document Editor requires server-side interactions for: * Open file formats other than SFDT * Paste with formatting @@ -231,8 +366,14 @@ For detailed information about server-side dependencies, refer to the [Web Servi N> Looking for the full React DOCX Editor component overview, features, pricing, and documentation? Visit the [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) page. +## Troubleshooting + +If you experience issues while loading, opening, or saving documents, ensure that the Document Editor service is properly configured and reachable from your application. For more details refer this [troubleshooting page](https://help.syncfusion.com/document-processing/word/word-processor/react/troubleshooting/document-loading-issue-with-404-error) + ## See also - [Open a document](./import) - [Save a document](./export) -- [Collaborative Editing](./collaborative-editing/overview) \ No newline at end of file +- [Collaborative editing](./collaborative-editing/overview) +- [Ribbon customization](./ribbon) +- [Features overview](./feature-module) \ No newline at end of file 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 be9b33f2db..29d93ec85b 100644 --- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md @@ -24,7 +24,7 @@ Before getting started with the Next.js application, ensure the following prereq ### Create a Next.js application -**Step 1:** To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn. +**Step 1:** To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn. For more information, see the [Next.js official getting-started guide](https://nextjs.org/docs/app/getting-started/installation). {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -41,7 +41,7 @@ yarn create next-app Using one of the above commands will prompt you to configure additional settings for the project: -**Step 2:** Specify the name of the project directly. In this example, the project is named `ej2-next js-documenteditor`: +**Step 2:** Enter the project name when prompted. In this example, the project is named `ej2-nextjs-documenteditor`: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -78,7 +78,7 @@ The application is ready to run with default settings. The next steps will add t ### Install Document Editor packages -The Document Editor package is available at [npmjs.com](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). +The Document Editor package is available on [npmjs.com](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). To install the Document Editor component, use the following command: @@ -115,7 +115,7 @@ Add the Document Editor component and its dependent component styles available i {% endhighlight %} {% endtabs %} -N> 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. +N> Next.js supports `@import` of `node_modules` paths via PostCSS, so no additional bundler configuration is required. 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 the Document Editor component @@ -148,6 +148,8 @@ export default function Home() { N> 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). +N> The `use client` directive is required at the top of this file because the Document Editor is a fully client-side component that relies on browser-only APIs (DOM, clipboard, etc.). Without it, Next.js will try to render the component on the server and fail. + ### Run the application Run the application using the following command: