How to view and edit word documents in React app using Syncfusion Word Processor?

This article will explain how to view and edit Word documents with the key features of Syncfusion’s React Word Processor component, and the procedure to integrate it into an React application.

The Syncfusion React Word Processor is also known as document editor. It is a component used to compose, edit, view, and print Word (DOCX, WordML, DOC, RTF, TXT) documents in your React applications. It provides all the standard Word processing features, such as:

• Editing text
• Formatting content
• Resizing images and tables
• Finding and replacing text
• Bookmarks
• Tables of contents
• Printing
• Importing and exporting Word documents.

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.

Syncfusion offers two components for the same purpose:

• Document editor provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.

Syncfusion Document Editor

• Document editor container provides the main document view area along with the built-in toolbar and properties pane.

Syncfusion Document Editor Container

Features of Word Processor

• Compose Word documents.
• View or edit existing Word documents.
• Print Word documents.
• Find and replace.
• Spell checking.
• Track changes.
• Add, edit, or delete comments.
• Copy and paste content from other applications.
• Protect the entire Word document or a particular range of the document.
• Render right-to-left (RTL).
• View in print layout (page-by-page view) or web layout.
• Customize toolbar and context menu.
• Format text, paragraphs, and tables.
• Style characters and paragraphs. Add custom styles.
• Bullets and numbering.
• Hyperlinks.
• Bookmarks.
• Page setup.
• Headers and footers.
• Footnote and endnote.
• Legacy form fields.
• Tables of contents.
• Page numbers.
  Note:

  This component requires server-side interaction for these operations:

  • Opening Word documents (converting Word to SFDT file format)
  • Pasting with formatting
  • Restricting editing
  • Spell checking

   

  A server-side Web API can be created using ASP.NET MVC and ASP.NET Core. Access the Document Editor Web API service projects from GitHub.

   

  Also, you can directly pull and consume our predefined Word Processor server Docker image from Docker Hub. This server-side Web API project is targeting ASP.NET Core 2.1.

At present, Syncfusion Word Processor performs spell checking for an entire document’s content for only one language at a time. The spell checker identifies the language through the languageID property. Whereas you can add multiple language dictionaries in the server-side Web API. Then, switch the `languageID` in client-side to different languages.

Host Word Processor Web API from Docker Hub image

The React Word Processor component facilitates a predefined Word Processor server Docker image. This image contains all the mandatory web APIs for opening Word documents, pasting with formatting, restricting editing, spell checking, and saving documents. You can pull this Docker image and deploy it directly in your server on the go.

If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing Word Processor Docker project.

Please refer our UG documentation to know more about deploying Word Processor docker image.

Create new React app with Word Processor component

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 Word Processor 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 serviceLink 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 Word Processor component.

Document Editor with Toolbar and Properties Pane

In the previous output image, the Word Processor is added to the page without a title bar and doesn’t fit the full size of the browser window.

Add title bar for Word Processor

Step 1: 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 2: Then, define the TitleBar class as required or add the title-bar.ts file from GitHub.

Step 3: 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 4: 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

Fit Word Processor to browser window size

In the src/app.tsx file, add logic to resize the document editor with respect to the window’s available size. Then, add an event listener for the browser window resize event.

Refer to the following code example.

onCreated():void {
    setInterval(()=>{
      this.updateDocumentEditorSize();
    }, 100);
    //Adds event listener for browser window resize event.
    window.addEventListener("resize", this.onWindowResize);
  }
  onWindowResize= (): void => {
    //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
    this.updateDocumentEditorSize();
  }
  updateDocumentEditorSize(): void {
    //Resizes the document editor component to fit full browser window.
    var windowWidth = window.innerWidth;
    //Reducing the size of title bar, to fit Document editor component in remaining height.
    var windowHeight = window.innerHeight - this.titleBar.getHeight();
    this.container.resize(windowWidth, windowHeight);
  }

Then, execute the project. Now, you can see the browser opens with a complete Word Processor including title bar, toolbar, properties pane and document editor in full window.

Word Document Editor Fit to Full Window

Open a template document in Word Processor

You can open an existing Word document as an initial template using created event.

In the src/app.tsx file, add the following code to get SFDT for the specified template file. Then, open it in the React Word Processor component. The file name specified should be one of the files copied to the Docker container.

openTemplate(): void { 
    var uploadDocument = new FormData();
    uploadDocument.append('DocumentName', 'Getting Started.docx');
    var loadDocumentUrl = this.container.serviceUrl + 'LoadDocument';
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('POST', loadDocumentUrl, true);
    var dataContext = this;
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200 || httpRequest.status === 304) {
          //Opens the SFDT for the specified file received from the web API.
          dataContext.container.documentEditor.open(httpRequest.responseText);
        }
      }
    };
    //Sends the request with template file name to web API. 
    httpRequest.send(uploadDocument);
  }

Then, execute the project. Now, you can see the browser opens with a complete Word Processor loaded with a template document.

Document Editor Loaded with a Template Document

GitHub repository

For more information, refer to the complete working example to view and edit Word documents in React app.

Related Articles

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