What is React Document Editor and how does it work for Word Files?

A React Document Editor is a dedicated UI component, such as the Syncfusion® React DOCX Editor, that provides a rich, Word-like viewing and editing experience directly within your React applications.

This article provides a step-by-step guide to use Syncfusion® React DOCX Editor.

What is a React Document Editor?

The React Document Editor, such as the Syncfusion® React DOCX Editor, is a client-side component designed to offer a rich document editing experience within a React application. It handles tasks like:

Creating new documents.
Opening and editing existing .docx, .rtf, and .sfdt files.
Formatting text, paragraphs, tables, and images.
Saving documents in various formats.

It is built using React, allowing for efficient integration into modern web applications.

How it Works with Word Files (DOCX)

Browsers cannot natively render or process .docx files directly. Therefore, an intermediate step is required:

Server-Side Conversion: Your React application sends the .docx file to a backend server. This server uses dedicated libraries to convert the .docx into an SFDT (Syncfusion Document Text) format. SFDT is essentially a JSON representation of the document, which the client-side JavaScript editor can understand and render.

Client-Side Rendering: The React Document Editor component receives the SFDT data from the server and renders it in the browser. This rendering process applies all formatting, layout, and content.

Prerequisites

Before starting, ensure your development environment meets the following requirements:

Node.js: Version 14.0.0 or above
React: Version 15.5.4 or higher.

For detailed system requirements, refer to the documentation.

Step-by-step guide to use a React Document Editor for Word files

Step 1: Create or use a React application

To use a React Document Editor for Word files, you first need an existing application or create a new React application. Refer to the documentation to create a new React application.

Step 2: Install the Syncfusion® DOCX Editor package

All the Syncfusion® React component packages are available in the npmjs.com public registry. To install the Document Editor component, use the following command

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

Step 3: Add the required CSS styles

For the editor to render correctly, you must import its stylesheet. The simplest way to do this is to add the import statement to your src/App.css file.
Open src/App.css and add the following lines at the top:

@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-documenteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-ribbon/styles/material.css";

Step 4: Add the DOCX Editor to a React Component

Now that the Syncfusion® DOCX Editor packages are installed and styles are imported, you can add the DOCX editor to your React application. You will typically replace the default content of your src/App.tsx with the DocumentEditorContainer Component.
Open your src/App.tsx file and replace its content with the following code:

import React, { useRef, useEffect } from 'react';
import './App.css';
import { DocumentEditorContainerComponent, Ribbon } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Ribbon);

function App() {
 const containerRef = useRef<DocumentEditorContainerComponent | null>(null);
 return (
   <div>
     <DocumentEditorContainerComponent
       id="container"
       ref={containerRef}
       height={'590px'}
       toolbarMode="Ribbon"
     />
   </div>
 );
}

export default App;

Step 5: Add the license key

From v20.1.047 onwards, it is necessary to register a license key for Syncfusion® React components. For more information on obtaining and registering your license key, please refer to the documentation.

Step 6: Initial client-side view

At this point, if you run your React application without a connected server, you will see the DOCX Editor’s UI, but it might not fully function until the serviceUrl points to a live backend. Open your terminal in the React project directory and run:

npm start

Step 7: Web API for importing Word documents

As the Syncfusion® DOCX editor client-side script requires the document in SFDT file format, you can convert Word documents (.dotx, .docx, .dot, .doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format by using this Web API.

Create an ASP.NET Core Web API with the following example code for importing Word documents into the Document Editor component.

[AcceptVerbs("Post")]
       [HttpPost]
       [EnableCors("AllowAllOrigins")]
       [Route("Import")]
       public string Import(IFormCollection data)
       {
           if (data.Files.Count == 0)
               return null;
           Stream stream = new MemoryStream();
           IFormFile file = data.Files[0];
           int index = file.FileName.LastIndexOf('.');
           string type = index > -1 && index < file.FileName.Length - 1 ?
               file.FileName.Substring(index) : ".docx";
           file.CopyTo(stream);
           stream.Position = 0;

           // Hooks MetafileImageParsed event.
           WordDocument.MetafileImageParsed += OnMetafileImageParsed;
           WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
           // Unhooks MetafileImageParsed event.
           WordDocument.MetafileImageParsed -= OnMetafileImageParsed;

           string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
           document.Dispose();
           return json;
       }

Refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and its use for the serviceUrl property.

Step 8: Configure service URL and Load Document

Once your ASP.NET Core Web API service is running (e.g., http://localhost:62869/api/documenteditor/), update the serviceUrl property in your src/App.tsx file to point to this URL. Then, add the following code snippet to load the document in the DOCX Editor.

import React, { useRef, useEffect } from 'react';
import './App.css';
import { DocumentEditorContainerComponent, Ribbon } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Ribbon);

function App() {
  const containerRef = useRef<DocumentEditorContainerComponent | null>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      const form = new FormData();
      form.append('DocumentName', 'Intro.docx'); // Your server-side document
      fetch(container.serviceUrl + 'LoadDocument', { method: 'POST', body: form })
        .then(res => res.text())
        .then(sfdt => {
          if (container.documentEditor) {
            container.documentEditor.open(sfdt);
          }
        });
    }
  }, []);

  return (
    <div id="editorArea">
      <DocumentEditorContainerComponent
        id="container"
        ref={containerRef}
        height={'590px'}
        serviceUrl="http://localhost:62869/api/documenteditor/"
        toolbarMode="Ribbon"
      />
    </div>
  );
}
export default App;

Step 9: Run the application

To see the Syncfusion® DOCX Editor in action with a functioning backend, ensure your Web API service is running, then run your React application.

Start your Web API service
Run your React application: Open your terminal in the React project directory and run:

npm start

Your browser will open to http://localhost:3000, displaying a fully functional DOCX Editor embedded in your React application, ready to interact with your server for document processing.

You can download a complete working sample of Word files in React from GitHub.

Conclusion
I hope you enjoyed learning what is React Document Editor and how does it work for Word Files.

You can refer to our React DOCX 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 DOCX Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)