Syncfusion Document Editor React

https://help.syncfusion.com/document-processing/word/word-processor/react
Admin
Syncfusion Document Editor is a React component for creating, editing, viewing, and printing Word...
Tokens:187,623
Snippets:1,285
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started

Execute this command in the console to launch the development server.

```bash
npm run dev
```

--------------------------------

### Open Page Setup Dialog in React Word Processor

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/print

Injects the necessary modules and demonstrates how to open the page setup dialog programmatically. Ensure the `enablePageSetupDialog` property is set to true.

```typescript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  SfdtExport,
  Selection,
  Editor,
  PageSetupDialog,
} from '@syncfusion/ej2-react-documenteditor';
//Inject require module.
DocumentEditorComponent.Inject(Selection, Editor, PageSetupDialog);
function App() {
  let documenteditor;
  React.useEffect(() => {
    componentDidMount();
  }, []);
  function componentDidMount() {
    //Open page setup dialog.
    documenteditor.showPageSetupDialog();
  }
  return (
    <div>
      <DocumentEditorComponent
        id="container"
        ref={(scope) => {
          documenteditor = scope;
        }}
        isReadOnly={false}
        enableSelection={true}
        enableEditor={true}
        enableEditorHistory={true}
        enablePageSetupDialog={true}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### React Word Processor Component Setup

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/saving-documents/azure-blob-storage

This code sets up the DocumentEditorContainerComponent in a React application. Ensure the Azure.Storage.Blobs NuGet package is installed for Azure Blob Storage functionality.

```javascript
<div>
            <button onClick={save}>Save to Azure Blob Storage</button>
            <DocumentEditorContainerComponent id="container" ref={(scope) => { container = scope; }}
                height={'590px'}
                serviceUrl="http://localhost:62870/api/documenteditor/"
                enableToolbar={true}
            />
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

--------------------------------

### Example Tagging Docker Image for EKS Cluster

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service

An example of tagging a Docker image for use with an EKS cluster, demonstrating the format for EKS-specific registry URIs.

```bash
docker tag 12345.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest 98765ABCD.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest
```

--------------------------------

### Configure project settings

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/nextjs-getting-started

Example of the interactive prompts displayed during the Next.js project creation process.

```bash
√ What is your project named? » ej2-nextjs-documenteditor
```

```bash
√ What is your project named? ... ej2-nextjs-documenteditor
√ Would you like to use TypeScript? ... No / `Yes`
√ Would you like to use ESLint? ... No / `Yes`
√ 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
Creating a new Next.js app in D:\ej2-nextjs-documenteditor.
```

--------------------------------

### Start Word Processor Server with Docker Compose

Source: https://help.syncfusion.com/document-processing/Word/Word-Processor/react/server-deployment

Navigate to the directory containing your docker-compose.yml file and run this command to start the Word Processor server Docker instance.

```bash
docker-compose up
```

--------------------------------

### Example Tagging Docker Image for ECR

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service

An example of tagging a Docker image for ECR, showing concrete values for image name, registry URI, and repository name.

```bash
docker tag syncfusion/word-processor-server:latest 123456.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest
```

--------------------------------

### Install kubectl CLI

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service

Installs the Kubernetes command-line tool (kubectl) into your workspace. This tool is used to interact with your Kubernetes cluster.

```bash
az aks install-cli
```

--------------------------------

### Initialize and Configure Document Editor

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/read-by-default

Demonstrates the setup of the DocumentEditorContainerComponent with toolbar injection and document loading.

```typescript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
    let documenteditorcontainer: DocumentEditorContainerComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function onLoadDefault() {
        // load your default document here
        let data = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily"
```

--------------------------------

### Install UI Builder Skill for Copilot

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill

Use the APM CLI to install the React UI Builder Skill with DOCX Editor for the Copilot target.

```bash
apm install syncfusion/react-ui-builder -t copilot
```

--------------------------------

### Set Up React JavaScript App with Vite

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started

Commands to create a React application with JavaScript using Vite and start the development server.

```bash
npm create vite@latest my-app -- --template react
cd my-app
npm run dev
```

--------------------------------

### Restrict Editing Pane Example

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/document-management

Demonstrates how to configure and apply document editing restrictions, including formatting and user-based range permissions. The provided code snippets show setup for React applications using JavaScript, TypeScript, and HTML.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DocumentEditorContainerComponent,
  DocumentEditorEditorSettingsModel,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

// Adds the modules to the DocumentEditorContainer
DocumentEditorContainerComponent.Inject(Toolbar);

const App = () => {
  const hostUrl = 'https://services.syncfusion.com/react/production/api/documenteditor/';
  const editorSettings: DocumentEditorEditorSettingsModel = {
    // Restrict editing options
    restrictEditing: {
      enabled: true,
      // Example: Allow formatting
      allowFormatting: true,
      // Example: Set password to protect
      password: '123',
      // Example: Set password to unprotect
      passwordToUnprotect: '123',
      // Example: Restrict editing to read-only
      readOnly: false,
    },
  };

  return (
    <DocumentEditorContainerComponent
      id='container'
      serviceUrl={hostUrl}
      enableToolbar={true}
      height={'500px'}
      editorSettings={editorSettings}
    />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

```

```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DocumentEditorContainerComponent,
  DocumentEditorEditorSettingsModel,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

// Adds the modules to the DocumentEditorContainer
DocumentEditorContainerComponent.Inject(Toolbar);

const App = (): JSX.Element => {
  const hostUrl: string = 'https://services.syncfusion.com/react/production/api/documenteditor/';
  const editorSettings: DocumentEditorEditorSettingsModel = {
    // Restrict editing options
    restrictEditing: {
      enabled: true,
      // Example: Allow formatting
      allowFormatting: true,
      // Example: Set password to protect
      password: '123',
      // Example: Set password to unprotect
      passwordToUnprotect: '123',
      // Example: Restrict editing to read-only
      readOnly: false,
    },
  };

  return (
    <DocumentEditorContainerComponent
      id='container'
      serviceUrl={hostUrl}
      enableToolbar={true}
      height={'500px'}
      editorSettings={editorSettings}
    />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
    <link
      href="https://cdn.syncfusion.com/ej2/20.1.0.47/material.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0px;
        font-family: "Roboto", sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

```

--------------------------------

### Open Page Setup Dialog in React

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/dialog

Inject the PageSetupDialog module and use the showDialog method to trigger the dialog interface.

```ts
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent, SfdtExport, Selection, Editor, PageSetupDialog
} from '@syncfusion/ej2-react-documenteditor';


DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, PageSetupDialog);
function App() {
  let documenteditor: DocumentEditorComponent;
  function ShowPageSetupDialog() {
    //Open page setup dialog.
    documenteditor.showDialog('PageSetup');
  }
  return (
    <div>
      <button onClick={ShowPageSetupDialog}>Dialog</button>
      <DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enableSelection={true} enableEditor={true} enableSfdtExport={true} enablePageSetupDialog={true} />
    </div>
  );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

--------------------------------

### Install UI Builder Skill for Cursor

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill

Use the APM CLI to install the React UI Builder Skill with DOCX Editor for the Cursor target.

```bash
apm install syncfusion/react-ui-builder -t cursor
```

--------------------------------

### React Word Processor Component Setup

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/paragraph-format

This snippet shows the basic setup of the React Word Processor component, including toolbar and document editor configurations. It requires React and Syncfusion component imports.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    ToolbarComponent,
    ItemsDirective,
    ItemDirective
} from '@syncfusion/ej2-react-navigations';
import {
    DocumentEditorComponent,
    DocumentEditorContainerComponent,
    SfdtExport,
    WordExport,
    Editor,
    EditorHistory
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorEditor.Inject(SfdtExport, WordExport, Editor, EditorHistory);

function App() {
    let documenteditor;
    function toolbarButtonClick() {
        if (documenteditor.documentEditorSettings.showHiddenMarks) {
            document.getElementById('ShowParagraphMark').classList.remove('e-btn-toggle');
            documenteditor.documentEditorSettings.showHiddenMarks = false;
        } else {
            document.getElementById('ShowParagraphMark').classList.add('e-btn-toggle');
            documenteditor.documentEditorSettings.showHiddenMarks = true;
        }
    }

    return (
        <div>
            <ToolbarComponent id='toolbar' clicked={toolbarButtonClick}>
                <ItemsDirective>
                    <ItemDirective id="AlignLeft" prefixIcon="e-de-ctnr-alignleft e-icons" tooltipText="Align Left" />
                    <ItemDirective id="AlignCenter" prefixIcon="e-de-ctnr-aligncenter e-icons" tooltipText="Align Center" />
                    <ItemDirective id="AlignRight" prefixIcon="e-de-ctnr-alignright e-icons" tooltipText="Align Right" />
                    <ItemDirective id="Justify" prefixIcon="e-de-ctnr-justify e-icons" tooltipText="Justify" />
                    <ItemDirective type="Separator" />
                    <ItemDirective id="IncreaseIndent" prefixIcon="e-de-ctnr-increaseindent e-icons" tooltipText="Increase Indent" />
                    <ItemDirective id="DecreaseIndent" prefixIcon="e-de-ctnr-decreaseindent e-icons" tooltipText="Decrease Indent" />
                    <ItemDirective type="Separator" />
                    <ItemDirective id="ClearFormat" prefixIcon="e-de-ctnr-clearall e-icons" tooltipText="Clear Formatting" />
                    <ItemDirective type="Separator" />
                    <ItemDirective id="ShowParagraphMark" prefixIcon="e-de-e-paragraph-mark e-icons" tooltipText="Show the hidden characters like spaces, tab, paragraph marks, and breaks.(Ctrl + *)" />
                </ItemsDirective>
            </ToolbarComponent>

            <DocumentEditorComponent
                id="container"
                ref={scope => {
                    documenteditor = scope;
                }}
                isReadOnly={false}
                enableSelection={true}
                enableEditor={true}
                enableEditorHistory={true}
                enableContextMenu={true}
                enableTableDialog={true}
                height={'330px'}
            />
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### Set Up React TypeScript App with Vite

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started

Commands to create a React application with TypeScript using Vite and start the development server.

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
```

--------------------------------

### Install UI Builder Skill for Claude

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill

Use the APM CLI to install the React UI Builder Skill with DOCX Editor for the Claude target.

```bash
apm install syncfusion/react-ui-builder -t claude
```

--------------------------------

### HTML Setup for Document Editor

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/enable-ruler-in-document-editor-component

Required HTML structure and stylesheet imports for the Document Editor component.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" />   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
```

--------------------------------

### Configure Document Editor Component

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/read-by-default

Example showing the component structure, service URL configuration, and read-only mode toggling.

```tsx
    function componentDidMount() {
        setTimeout(() => {
            onLoadDefault();
        });
    }
    return (<DocumentEditorComponent id="container" ref={(scope) => { documentEditor = scope; }} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} height={'330px'}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

```tsx
import * as ReactDOM from 'react-dom';
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';

//Inject require modules.
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() {
    let documentEditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function onLoadDefault() {
        // load your default document here
```

--------------------------------

### Initialize and Configure DocumentEditorComponent

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/scrolling-zooming

The main App component setup including component rendering and lifecycle management for document loading.

```tsx
                            },
                            inlines: [
                                {
                                    text: 'Second page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Third page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
            ],
            characterFormat: {},
            paragraphFormat: {},
            background: {
                color: '#FFFFFFFF',
            },
            styles: [
                {
                    type: 'Paragraph',
                    name: 'Normal',
                    next: 'Normal',
                },
                {
                    type: 'Character',
                    name: 'Default Paragraph Font',
                },
            ],
        };
        documenteditor.open(JSON.stringify(defaultDocument));
        documenteditor.focusIn();
    }
    function componentDidMount() {
        setTimeout(() => {
            //Load default document.
            onLoadDefaultDocument();
            //Navigate to specified page.
            documenteditor.viewer.scrollToPage(3);
        });
    }
    return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => {
            documenteditor = scope;
        }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

```tsx
import * as ReactDOM from 'react-dom';
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';

//Inject require modules.
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() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function onLoadDefaultDocument(): void {
        let defaultDocument: object = {
            sections: [
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'First page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
                    blocks: [
                        {
                            paragraphFormat: {
                                styleName: 'Normal',
                            },
                            inlines: [
                                {
                                    text: 'Second page',
                                },
                            ],
                        },
                    ],
                    headersFooters: {},
                },
                {
```

--------------------------------

### Inject and enable PageSetupDialog module

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/feature-module

Inject the Selection, Editor, and PageSetupDialog modules and enable the page setup dialog property.

```javascript
DocumentEditor.Inject(Selection, Editor, PageSetupDialog)
```

```javascript
<DocumentEditorComponent isReadOnly= {false} enableEditor= {true} enablePageSetupDialog= {true }>
```

--------------------------------

### HTML setup for Document Editor

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/import

Include the necessary Syncfusion CSS files in your HTML head to ensure the Document Editor renders correctly.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
```

--------------------------------

### HTML Setup for Document Editor

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/import

Include the necessary Syncfusion CSS files and script dependencies in your HTML file to support the Document Editor component.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/fabric.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='sample'>
```

--------------------------------

### Get selection start and end offset

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/move-selection-to-specific-position

Retrieve the start and end hierarchical indices of the current selection using the `startOffset` and `endOffset` properties of the selection module. This snippet is part of a React component that listens for selection changes.

```typescript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorContainerComponent,
    Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);

function App() {
    let container: DocumentEditorContainerComponent;
    function selectionChanges() {
        //Get the start index of current selection
        let startOffset: string = 
            container.documentEditor.selection.startOffset;
        //Get the end index of current selection
        let endOffset: string = container.documentEditor.selection.endOffset;
    }
    return (
        <DocumentEditorContainerComponent
            id="container"
            ref={(scope) => {
                container = scope;
            }}
            height={'590px'}
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
            enableToolbar={true}
            selectionChange={selectionChanges}
        />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

--------------------------------

### Navigate to project directory

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/nextjs-getting-started

Command to enter the newly created project folder.

```bash
cd ej2-nextjs-documenteditor
```

--------------------------------

### Select and Get Current Paragraph as SFDT

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/get-current-word

Use the `selectParagraph` API to select the current paragraph and then access the `text` or `sfdt` properties of the selection to get the content. This example demonstrates inserting text, selecting the paragraph, and retrieving its SFDT representation.

```typescript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container: DocumentEditorContainerComponent;
  function onCreated() {
    // To insert text in cursor position
    container.documentEditor.editor.insertText('Document editor');
    // To select the current paragraph in document
    container.documentEditor.selection.selectParagraph();

    // To get the selected content as text
    let selectedContentText: string = container.documentEditor.selection.text;
    // To get the selected content as SFDT (rich text)
    let selectedContentSFDT: string = container.documentEditor.selection.sfdt;
  }
  return (
    <DocumentEditorContainerComponent
      id="container"
      ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
      enableToolbar={true}
      created={onCreated}
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### Select and Get Current Word as Plain Text

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/get-current-word

Use the `selectCurrentWord` API to highlight the word at the cursor and then the `text` API to retrieve its content as plain text. This example demonstrates inserting text, moving the cursor, selecting the word, and then getting its plain text and SFDT representations.

```typescript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container: DocumentEditorContainerComponent;
  function onCreated() {
    // To insert text in cursor position
    container.documentEditor.editor.insertText('Document editor');
    // Move selection to previous character
    container.documentEditor.selection.moveToPreviousCharacter();
    // To select the current word in document
    container.documentEditor.selection.selectCurrentWord();

    // To get the selected content as text
    let selectedContentText: string = container.documentEditor.selection.text;
    // To get the selected content as SFDT (rich text)
    let selectedContentSFDT: string = container.documentEditor.selection.sfdt;
  }
  return (
    <DocumentEditorContainerComponent
      id="container"
      ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
      enableToolbar={true}
      created={onCreated}
    />
  );
}
export default App
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### Select content using hierarchical index

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/move-selection-to-specific-position

Use the `select` method with start and end hierarchical indices to select content. The hierarchical index format is sectionIndex;blockIndex;offset. This example inserts text and then selects the first two characters.

```typescript
container.documentEditor.editor.insertText("Welcome");
// The below code will select the letters ‘We’ from inserted text ‘Welcome’
container.documentEditor.selection.select("0;0;0", "0;0;2");
```

--------------------------------

### Create a Next.js application

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/nextjs-getting-started

Commands to initialize a new Next.js project using either NPM or Yarn.

```bash
npx create-next-app@latest
```

```bash
yarn create next-app
```

--------------------------------

### Initialize Document Editor Container in React

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/export

This snippet shows the basic setup for the DocumentEditorContainerComponent in a React application. It includes importing necessary modules and rendering the component with essential properties like height, serviceUrl, and enableToolbar. The useRef hook is used to get a reference to the component instance for further operations.

```tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
    DocumentEditorContainerComponent,
    Toolbar
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);

function App() {
    let container = useRef<DocumentEditorContainerComponent>(null);
    function save(){
        //Download the document in Dotx format.
        container.current.documentEditor.save('sample', 'Dotx');
    }
    return (
        <div>
            <button onClick={save}>Save</button>
            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} ref={container}/>;
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### Verify APM Installation

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill

Run this command to confirm that the Agent Package Manager (APM) is installed in your environment. This is a prerequisite for installing the React UI Builder Skill.

```bash
apm --version
```

--------------------------------

### Install UI Builder Skill for Codex

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/ui-builder-skill

Use the APM CLI to install the React UI Builder Skill with DOCX Editor for the Codex target.

```bash
apm install syncfusion/react-ui-builder -t codex
```

--------------------------------

### Initialize Google Cloud Storage Client

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/saving-documents/google-cloud-storage

Initialize the StorageClient in the controller's constructor using service account credentials. Ensure the key file path and bucket name are correctly configured.

```csharp
private readonly StorageClient _storageClient;

private IConfiguration _configuration;

public readonly string _bucketName;

public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;

  // The key file is used to authenticate with Google Cloud Storage.
  string keyFilePath = "path/to/service-account-key.json";

  // Load the service account credentials from the key file.
  var credentials = GoogleCredential.FromFile(keyFilePath);

  // Create a storage client with Application Default Credentials
  _storageClient = StorageClient.Create(credentials);

   _configuration = configuration;

   _bucketName = _configuration.GetValue<string>("BucketName");
}
```

--------------------------------

### Importing local documents in React

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/import

Use these examples to implement file selection and loading for .sfdt files. Ensure the DocumentEditorComponent is properly referenced to call the open method.

```jsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, } from '@syncfusion/ej2-react-documenteditor';
function App() {
    let documenteditor;
    function onImportClick() {
        //Open file picker.
        document.getElementById('file_upload').click();
    }
    function onFileChange(e) {
        if (e.target.files[0]) {
            //Get selected file.
            let file = e.target.files[0];
            //Open sfdt document.
            if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
                let fileReader = new FileReader();
                fileReader.onload = (e) => {
                    let contents = e.target.result;
                    let proxy = documenteditor;
                    //Open the document in Document Editor.
                    proxy.open(contents);
                };
                //Read the file as text.
                fileReader.readAsText(file);
                documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
            }
        }
    }
    return (<div>
            <input type='file' id='file_upload' accept='.sfdt' onChange={onFileChange}/>
            <button onClick={onImportClick}>Import</button>
            <DocumentEditorComponent id="container" ref={scope => {
            documenteditor = scope;
        }} height={'330px'}/>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

```tsx


import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent,
    DocumentEditor,
} from '@syncfusion/ej2-react-documenteditor';

function App() {
    let documenteditor: DocumentEditorComponent;

    function onImportClick() {
        //Open file picker.
        document.getElementById('file_upload').click();
    }
    function onFileChange(e: any) {
        if (e.target.files[0]) {
            //Get selected file.
            let file = e.target.files[0];
            //Open sfdt document.
            if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
                let fileReader: FileReader = new FileReader();
                fileReader.onload = (e: any) => {
                    let contents: string = e.target.result;
                    let proxy: any = documenteditor;
                    //Open the document in Document Editor.
                    proxy.open(contents);
                };
                //Read the file as text.
                fileReader.readAsText(file);
                documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
            }
        }
    }
    return (
        <div>
            <input type='file' id='file_upload' accept='.sfdt' onChange={onFileChange} />
            <button onClick={onImportClick}>Import</button>
            <DocumentEditorComponent
                id="container"
                ref={scope => {
                    documenteditor = scope;
                }}
                height={'330px'}
            />
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
```

--------------------------------

### Install Document Editor Package

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started

Install the Syncfusion Document Editor React component package using npm. The --save flag adds it to your package.json dependencies.

```bash
npm install @syncfusion/ej2-react-documenteditor --save
```

--------------------------------

### Configure appsettings.json

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/saving-documents/google-drive

Add Google Drive configuration settings to the web service configuration file.

```json
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "FolderId": "Your Google Drive Folder ID",
  "CredentialPath": "Your Path to the OAuth 2.0 Client IDs json file",
  "ApplicationName": "Your Application name"
}
```

--------------------------------

### Create Azure App Service Plan

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-app-service

Create an App Service plan using `az appservice plan create`. This example specifies a Linux container and the S1 pricing tier.

```bash
az appservice plan create --name documenteditorappservice --resource-group documenteditorresourcegroup --sku S1 --is-linux
```

--------------------------------

### Build Docker Image

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service

Builds a Docker image for the Word Processor Server application. Replace <your-image-name> with your desired image name.

```bash
docker build -t <your-image-name>
```

--------------------------------

### Create React App with Vite

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/getting-started

Use this command to create a new React application with Vite for a faster development environment.

```bash
npm create vite@latest my-app
```

--------------------------------

### Get Header Content as Text in React

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/how-to/retrieve-the-bookmark-content-as-text

Use `goToHeader` to navigate to the header and then `text` to get its content as plain text. Ensure the `DocumentEditorContainerComponent` is created before calling these APIs.

```typescript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorContainerComponent,
    Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
    let container: DocumentEditorContainerComponent;
    function onCreated() {
        // To navigate the selection to header
        container.documentEditor.selection.goToHeader();
        // To insert text in cursor position
        container.documentEditor.editor.insertText('Document editor');
        // To select all the content in document
        container.documentEditor.selection.selectAll();

        // To get the selected content as text
        let selectedContent: string = container.documentEditor.selection.text;
    }
    return (
        <DocumentEditorContainerComponent
            id="container"
            ref={(scope) => {
                container = scope;
            }}
            height={'590px'}
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
            enableToolbar={true}
            created={onCreated}
        />
    );
}
export default App()
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### Get or Set Text Alignment for Paragraphs

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/paragraph-format

Get or set the text alignment of selected paragraphs using the `textAlignment` property. Supported values are 'Center', 'Left', 'Right', 'Justify'.

```typescript
documenteditor.selection.paragraphFormat.textAlignment= 'Center' | 'Left' | 'Right' | 'Justify';
```

--------------------------------

### Create Kubernetes Services and Deployments

Source: https://help.syncfusion.com/document-processing/word/word-processor/react/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service

Applies the Kubernetes configuration defined in the 'documenteditor-server.yml' file to create the necessary services and deployments in your AKS cluster.

```bash
kubectl create -f ./documenteditor-server.yml
```
Tokens:
Raw