How to get started easily with React Document Editor?

This article will explain how to get started easily with Syncfusion’s React Document Editor component, and the procedure to integrate it into an React application.

Syncfusion Document Editor is a component used to compose, edit, view, and print Word (DOCX, WordML, DOC, RTF, TXT) documents in your React applications.

All the user interactions and editing operations run purely on the client side using our own SFDT (Syncfusion document text) file format. This approach provides a very fast editing experience to the end users.

Please refer our UG documentation to know more about server-side Web API.

Adding Document Editor to React Application

To create a React app, please set up your environment with the following prerequisites:

• Node.js
• React versions supported: Greater than 15.5.4
• Visual Studio Code (or code editor of your choice)

Now, proceed in creating a new React app and integrate the Document Editor Container component using the following steps:

Step 1: First, create a new React demo project. Please refer to the documentation for creating a new React app in the local machine.

Step 2: After creating a new React app, install the React document editor NuGet package.

The following command installs React document editor and its dependent packages. The --save command instructs the NPM to include the document editor package inside the dependencies section of the package.json file.

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

Step 3: In the src/App.css file, reference the theme-specific CSS files that you prefer for document editor component. Here, we have referenced Material theme CSS files.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css"

Step 4: In the src/app.tsx file, declare the serviceUrl property. This service URL will be used for the document editor’s server-side dependent functionalities.

Then, the modified src/app.tsx file will be like the following.

import * as React from 'react';
import './App.css';
import {
    DocumentEditorContainerComponent, Toolbar
} from '@syncfusion/ej2-react-documenteditor';
 
DocumentEditorContainerComponent.Inject(Toolbar);
export class Default extends React.Component<{}, {}> {
    render() {
        return (
            <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" enableToolbar={true} />);
    }
}

Then, execute the project using the npm start command in the terminal window. Now, you will see the browser opens with the Document Editor Container component.

Step 5: Add the following div element as the first line of the src/app.tsx file. Then, add the required styles in the src/App.css file.

<div id="default_title_bar" className="e-de-ctn-title"></div>

Step 6: Then, define the TitleBar class as required or add the title-bar.ts file from GitHub.

Step 7: Now, install the following packages used in the src/ title-bar.ts file.

npm install @syncfusion/ej2-react-buttons -save
npm install @syncfusion/ej2-react-splitbuttons -save
npm install @syncfusion/ej2-react-navigations -save

Step 8: In the src/app.tsx file, import the TitleBar class and create a new title bar instance. Also, add the created and documentChange event handlers for the document editor component.

import React from 'react';
import './App.css';
 
import {
  DocumentEditorContainerComponent, Toolbar
} from '@syncfusion/ej2-react-documenteditor';
import { TitleBar } from './title-bar';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
DocumentEditorContainerComponent.Inject(Toolbar);
export class Default extends React.Component<{}, {}> {
  titleBar: TitleBar;
  container: DocumentEditorContainerComponent;
  onCreated(): void {
    let titleBarElement: HTMLElement = document.getElementById('default_title_bar') as HTMLElement;
    this.titleBar = new TitleBar(titleBarElement, this.container.documentEditor, true);
    this.container.documentEditor.documentName = 'Getting Started';
    this.titleBar.updateDocumentTitle();
    this.container.documentChange = function () {
      if (!isNullOrUndefined(this.titleBar)) {
        this.titleBar.updateDocumentTitle();
      }
      this.container.documentEditor.focusIn();
    }
  }
  render() {
    return (
      <div>
        <div id="default_title_bar" className="e-de-ctn-title"></div>
        <DocumentEditorContainerComponent id="container" ref={(scope) => { this.container = scope; }} height={'590px'} serviceUrl={"http://localhost:6002/api/documenteditor/"} enableToolbar={true} created={this.onCreated.bind(this)} />
      </div>
    );
  }
}

Now, execute the project and you can see the browser opens with a title bar and document editor.

Document Editor Container with Title Bar

GitHub repository

For more information, refer to the complete working example to React app.

Summary

Thank you for taking time to read this article. We have seen how to get started with React Document Editor and integrate the component into your application.

Also, take a moment to peruse the documentation, where you’ll find other features, all with accompanying code examples.

Are you already a Syncfusion user? Then, you can download the product setup here. If you’re not yet a Syncfusion user, you can download a free, 30-day trial here.

If you have any questions about these features, please let us know in the comments below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are happy to assist you!

Related Articles

• View and Edit Word Documents in React App
• View and Edit Word Documents in Angular App
• View and Edit Word Documents in Vue App
• View and Edit Word Documents in Vue3 App

Conclusion

I hope you enjoyed about how to get started easily with React Document Editor.

You can refer to our React Document Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Document Editor example to understand how to create and manipulate data.