Docker Image of Syncfusion JavaScript DOCX Editor Control

28 Aug 20269 minutes to read

The JavaScript DOCX Editor (Document Editor) is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents.

This Docker image is the preconfigured Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure.

Word Processor is a commercial product, and it requires a valid license for use in a production environment (request a license or trial key).

The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms.

Prerequisites

Have Docker installed in your environment:

On Windows, install Docker for Windows.
On macOS, install Docker for Mac.

How to deploy Word Processor Docker image

Step 1: Pull the word-processor-server image from Docker Hub.

docker pull syncfusion/word-processor-server

Step 2: Create the docker-compose.yml file with the following code in your working directory.

version: '3.4'

services:
  word-processor-server:
    image: syncfusion/word-processor-server:latest
    environment:
      # Provide your license key for activation
      SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
    ports:
    - "6002:80"

Step 3: In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file and run the following command.

docker-compose up

Now the Word Processor Server Docker instance runs on localhost at http://localhost:6002. Open this link in a browser and navigate to the Word Processor Web API at http://localhost:6002/api/documenteditor/. It returns the default GET-method response.

Step 4: Append the running Docker instance URL http://localhost:6002/api/documenteditor/ to the serviceUrl in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to the Getting Started page.

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>
      <title>Essential JS 2</title>
      <!-- EJ2 Document Editor dependency material theme -->
      <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/splitbuttons/styles/material.css" rel="stylesheet" type="text/css" />
      <link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
      <!-- EJ2 DocumentEditor material theme -->
      <link href="resources/documenteditor/styles/material.css" rel="stylesheet" type="text/css" />

      <!-- EJ2 Document Editor dependent scripts -->
      <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-file-utils.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-compression.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-pdf-export.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-splitbuttons.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-lists.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-dropdowns.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-calendars.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
      <script src="resources/scripts/ej2-office-chart.min.js" type="text/javascript"></script>
      <!-- EJ2 Document Editor script -->
      <script src="resources/scripts/ej2-documenteditor.min.js" type="text/javascript"></script>
  </head>

  <body>
      <!--element which is going to render-->
      <div id='DocumentEditor' style='height:620px'>
      </div>

      <script>
          // Initialize DocumentEditorContainer component.
          var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true });
          //Inject require modules.
          ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
          documenteditorContainer.serviceUrl = "http://localhost:6002/api/documenteditor/";

          //DocumentEditorContainer control rendering starts
          documenteditorContainer.appendTo('#DocumentEditor');
      </script>
  </body>

  </html>

How to configure spell checker dictionaries path in Docker Compose file

Step 1: In the Docker Compose file, mount the local directory as a container volume using the following code.

version: '3.4'
services:
  word-processor-server:
    image: syncfusion/word-processor-server:latest
    environment:
      # Provide your license key for activation
      SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
    volumes:
      - ./data:/app/data
    ports:
    - "6002:80"

This YAML definition mounts the data folder located in the same directory as the Docker Compose file.

Step 2: In the data folder, include the dictionary files (.dic, .aff) and a JSON file. The JSON file should contain the language-based dictionary file configuration in the following format.

[
    {
      "LanguageID": 1036,
      "DictionaryPath": "fr_FR.dic",
      "AffixPath": "fr_FR.aff",
      "PersonalDictPath": "customDict.dic"
    },
    {
      "LanguageID": 1033,
      "DictionaryPath": "en_US.dic",
      "AffixPath": "en_US.aff",
      "PersonalDictPath": "customDict.dic"
    }
]

NOTE

By default, the JSON file name should be spellcheck.json. You can also use a different file name by setting the SPELLCHECK_JSON_FILENAME attribute in the Docker Compose file as shown below:

version: '3.4'

services:
  word-processor-server:
    image: syncfusion/word-processor-server:latest
    environment:
      # Provide your license key for activation
      SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
      SPELLCHECK_DICTIONARY_PATH: data
      SPELLCHECK_JSON_FILENAME: spellcheck1.json
    volumes:
      - ./data:/app/data
    ports:
    - "6002:80"

Step 3: To handle the personal dictionary, place an empty .dic file (e.g., customDict.dic) in the data folder.

Step 4: Provide the configured volume path to the environment variable as shown in the following Docker Compose file.

version: '3.4'
services:
  word-processor-server:
    image: syncfusion/word-processor-server:latest
    environment:
      # Provide your license key for activation
      SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
      SPELLCHECK_DICTIONARY_PATH: data
    volumes:
      - ./data:/app/data
    ports:
    - "6002:80"

How to copy template Word documents to Docker image

You can copy the required template Word documents into the Docker container when deploying the Docker image to the server. You can open these Word documents that are present on the server by passing the document path or name with a relative path to the LoadDocument() web API.

NOTE

Place the Word files in the data folder mentioned in the volumes section (i.e., C:/Docker/Data) of the docker-compose.yml file. All the files present in the folder path (C:/Docker/Data) mentioned in the volumes section of the docker-compose.yml file will be copied to the corresponding folder (/app/Data) of the Docker container. The Word documents copied to the Docker container can be processed using the LoadDocument web API.

The following code example shows how to use LoadDocument() API in DOCX Editor.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
DocumentEditorContainer.Inject(Toolbar);

container.created = function () {
    var dataContext = this;
    var uploadDocument = new FormData();
    uploadDocument.append('DocumentName', 'Getting Started.docx');
    var baseUrl = 'http://localhost:6002/api/documenteditor/LoadDocument';
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('POST', baseUrl, true);
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200 || httpRequest.status === 304) {
                dataContext.container.documentEditor.open(httpRequest.responseText);
            }
        }
    };
    httpRequest.send(uploadDocument);
    dataContext.container.documentEditor.spellChecker.languageID = 1033;
};

container.appendTo('#container');

Refer to these getting started pages to create a Word Processor in Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor.

Search docs

Ask Syncfusion AI Assistant