diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md index 2789c04d6d..4309e818af 100644 --- a/Document-Processing/Word/Word-Processor/react/getting-started.md +++ b/Document-Processing/Word/Word-Processor/react/getting-started.md @@ -10,125 +10,134 @@ 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 in a React application. {% tabcontents %} -{% tabcontent TypeScript %} +{% tabcontent Syncfusion CLI %} -## Prerequisites +## Install the Syncfusion CLI -* [System requirements for React components](https://ej2.syncfusion.com/react/documentation/system-requirement) -* [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser) +Install the Syncfusion CLI globally using the following command: -## Create a new React application +{% tabs %} +{% highlight bash tabtitle="npm" %} -To set up a React application in a TypeScript environment, run the following commands: +npm install -g @syncfusion/syncfusion-cli -```bash -npm create vite@latest documenteditor-app -- --template react-ts -cd documenteditor-app -``` +{% endhighlight %} +{% endtabs %} -## Install the React DOCX Editor npm package +## Set up the Vite project using Syncfusion CLI -The DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor). +You can create a React Vite application using the Syncfusion CLI. The CLI provides two ways to create a project: +### Non-interactive mode -To install the DOCX Editor component, use the following command: +Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments. -```bash -npm install @syncfusion/ej2-react-documenteditor --save -``` +{% tabs %} +{% highlight bash tabtitle="CMD" %} -## Register a Syncfusion License Key +sf new syncfusion-react-app --framework react --template DOCX-Editor --theme tailwind3 -Before initializing the React DOCX Editor control, generate a Syncfusion license key and register it in your application. +{% endhighlight %} +{% endtabs %} -- [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) -- [Register a Syncfusion License Key in React](https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration) +In this mode, the project configuration is passed directly in the command. The above command creates a React Vite application configured with the Syncfusion® `DOCX Editor` component. -## Import the required CSS styles +### Interactive mode -Add the DOCX Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file. +Interactive mode guides you through the project creation process with step-by-step prompts. {% tabs %} -{% highlight css tabtitle="index.css" %} +{% highlight bash tabtitle="CMD" %} -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-documenteditor/styles/tailwind3.css'; +sf {% endhighlight %} {% endtabs %} -N> This example uses the `Tailwind 3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +When you run the `sf` command, the CLI prompts you to select the required project configuration. To create a React Vite application with the Syncfusion® `DOCX Editor` component, select the following options: -## Initialize the DOCX Editor +{% tabs %} +{% highlight bash tabtitle="CMD" %} + +√ Project name? ... Syncfusion-react-app +√ Choose Framework: » React +√ Choose Build Tool: » Vite +√ Choose Language: » JavaScript +√ Choose Template: » DOCX-Editor +√ Choose Theme: » Tailwind3 +√ Choose Style Format: » CSS +√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no +√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no +√ Install dependencies and start app now? ... no -Add the DOCX Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component: +{% endhighlight %} +{% endtabs %} -{% tabs %} -{% highlight ts tabtitle="App.tsx" %} +The above selections generate a React Vite application configured with the Syncfusion® `DOCX Editor` component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements. -import * as React from 'react'; -import { - DocumentEditorContainerComponent, - Toolbar -} from '@syncfusion/ej2-react-documenteditor'; +The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements. -DocumentEditorContainerComponent.Inject(Toolbar); +## Run the project -function App() { - return ( - - ); -} +Once the project is created, navigate to the project directory and run the following commands in your terminal. -export default App; +{% tabs %} +{% highlight bash tabtitle="CMD" %} + +cd syncfusion-react-app +npm install +npm run dev {% 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 output will appear as follows: -## Run the application - -Run the application using the following command: - -```bash -npm run dev -``` +![Output of React DOCX Editor Using Syncfusion CLI](./images/syncfusion_cli_getting_started.png) {% endtabcontent %} -{% tabcontent JavaScript %} +{% tabcontent Vite CLI %} ## Prerequisites +{% tabcontents %} +{% tabcontent TypeScript %} +* [System requirements for React components](https://ej2.syncfusion.com/react/documentation/system-requirement) +* [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser) +{% endtabcontent %} + +{% tabcontent JavaScript %} * [System requirements for DOCX Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) * [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser) +{% endtabcontent %} +{% endtabcontents %} ## Create a new React application +{% tabcontents %} +{% tabcontent TypeScript %} +To set up a React application in a TypeScript environment, run the following commands: + +```bash +npm create vite@latest documenteditor-app -- --template react-ts +cd documenteditor-app +``` +{% endtabcontent %} + +{% tabcontent JavaScript %} To set up a React application in a JavaScript environment, run the following commands: ```bash npm create vite@latest documenteditor-app -- --template react cd documenteditor-app ``` +{% endtabcontent %} +{% endtabcontents %} ## Install the React DOCX Editor npm package @@ -146,11 +155,11 @@ npm install @syncfusion/ej2-react-documenteditor --save Before initializing the React DOCX Editor control, generate a Syncfusion license key and register it in your application. - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) -- [Register a Syncfusion License Key in React](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#reactjs) +- [Register a Syncfusion License Key in React](https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration) ## Import the required CSS styles -Add the DOCX Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file: +Add the DOCX Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file. {% tabs %} {% highlight css tabtitle="index.css" %} @@ -168,8 +177,44 @@ Add the DOCX Editor component and its dependent component styles available in th {% endhighlight %} {% endtabs %} +N> This example uses the `Tailwind 3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. + ## Initialize the DOCX Editor +{% tabcontents %} +{% tabcontent TypeScript %} +Add the DOCX Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component: + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} + +import * as React from 'react'; +import { + DocumentEditorContainerComponent, + Toolbar +} from '@syncfusion/ej2-react-documenteditor'; + +DocumentEditorContainerComponent.Inject(Toolbar); + +function App() { + return ( + + ); +} + +export default App; + +{% endhighlight %} +{% endtabs %} +{% endtabcontent %} + +{% tabcontent JavaScript %} Add the DOCX Editor component to your application. In the `src/App.jsx` file, add the following code to initialize the component: {% tabs %} @@ -195,6 +240,8 @@ export default App; {% endhighlight %} {% endtabs %} +{% endtabcontent %} +{% endtabcontents %} 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). @@ -205,9 +252,6 @@ Run the application using the following command: ```bash npm run dev ``` -{% endtabcontent %} - -{% endtabcontents %} After the application starts, open the localhost URL shown in the terminal. The React DOCX Editor is rendered in the browser with a toolbar and an editable document area, as shown below. @@ -219,6 +263,10 @@ You can also explore the DOCX Editor interactively using the live sample below. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/React-DOCX-Editor-Examples/tree/master/getting-started). +{% endtabcontent %} + +{% endtabcontents %} + ## Online Demo Explore how to create, edit, and print Word documents using the React DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/default). diff --git a/Document-Processing/Word/Word-Processor/react/images/syncfusion_cli_getting_started.png b/Document-Processing/Word/Word-Processor/react/images/syncfusion_cli_getting_started.png new file mode 100644 index 0000000000..7c13b41afc Binary files /dev/null and b/Document-Processing/Word/Word-Processor/react/images/syncfusion_cli_getting_started.png differ