Section:

Apryse DOCX Editor Basic Setup

Requirements
View Demo
Package: DOCX Editor

Create and edit DOCX without any server-side dependencies. WebViewer enables MS Office file editing without the need for intermediate format conversion or MS Office installations on your server.

A docx file open in DOCX Editor

A docs file open in DOCX Editor

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

You can also, alternatively, open a new, blank docx file through the WebViewer constructor.

Get started videos

Learn how to integrate WebViewer and enable the Apryse DOCX Editor through the Apryse WebViewer by selecting one of the tabs below, then viewing its video.

The React video integrates the Apryse WebViewer with DOCX Editor enabled, then opens an existing .docx document, all within a React project. The Svelte video integrates the Apryse WebViewer with DOCX Editor enabled, then opens a new, blank docx file inside the viewer, all within a Svelte project.

You can also skip the videos and follow the steps below to get started instead.

Integrate WebViewer and DOCX Editor into a React app

Prerequisites

Before you start:

  • Install Node and npm to use as your run-time environment/package manager.
  • Create a folder for your project.
  • Integrate WebViewer into your project.
  • Open a text editor like Visual Studio Code.
  • Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Enable and open existing docx document

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

WebViewer constructor

Load the office document with the WebViewer constructor and it will load with the Viewer.

JavaScript

1WebViewer({
2  ...,
3  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
4  initialMode: 'docxEditor',
5}, document.getElementById('viewer'));

Related Links

Below is an example of how the code might look in an HTML project where WebViewer is integrated and DOCX Editor is enabled:

HTML

index.html

1<html>
2<head>
3  <title>Basic WebViewer</title>
4  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5</head>
6
7<!-- Import WebViewer as a script tag -->
8<script src='/lib/webviewer/webviewer.min.js'></script>
9
10<body>
11  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
12  <script>
13WebViewer({
14  path: 'lib/webviewer', // Path to the 'lib' folder on your server
15  licenseKey: 'YOUR_LICENSE_KEY', //Sign up to get a license key at https://dev.apryse.com
16  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
17  initialMode: 'docxEditor',
18// initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server
19}, document.getElementById('viewer'))
20  .then(instance => {
21    const { documentViewer, annotationManager } = instance.Core;
22
23// Call methods from instance, documentViewer, and annotationManager as needed
24
25// You can also access major namespaces from the instance as follows:
26  // const Tools = instance.Core.Tools;
27 //  const Annotations = instance.Core.Annotations;
28 
29// call methods relating to the loaded document
30    documentViewer.addEventListener('documentLoaded', () => {
31    });
32  })
33</script>
34</body>
35</html>

Load document

Load the office document with the load document method after WebViewer is initialized.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.UI.loadDocument(
4      'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
5      {
6        filename: 'report.docx',
7        initialMode: 'docx',
8      });
9  });

Related Links

Enable and open new, blank docx document

You can open a new, blank docx file through the WebViewer constructor.

WebViewer constructor

Initialize WebViewer constructor without the initialDoc property and the Viewer will load with an empty document, ready to be edited.

JavaScript

1WebViewer({
2  ...,
3  enableOfficeEditing: true,
4}, document.getElementById('viewer'));

Related Links

IME Keyboard Support

DOCX Editor supports IME (Input Method Editor) keyboard input through string composition that allows for complex text input. This includes proper text entry for languages such as Chinese, Japanese, Korean, and other languages that rely on composition events. This feature is not enabled by default.

IME support in DOCX Editor is controlled through:

  • A constructor option to enable composition input by default.
  • Runtime APIs to enable, disable, or inspect composition state.

WebViewer IME Constructor Option

To enable string composition when initializing DOCX Editor, set enableCompositionInput to true as shown in the constructor below:

HTML

1WebViewer({
2  path: '/lib',
3  enableOfficeEditing: true,
4  enableCompositionInput: true
5}, document.getElementById('viewer'));

This approach should be used if you anticipate your application supporting multilingual keyboard input by default.

IME Runtime Composition APIs

To dynamically enable, disable, or check the status of IME string composition use the following APIs:

  • enableCompositionInput()
  • disableCompositionInput()
  • isCompositionActive()

These APIs allow you to toggle IME support based on user preferences or locale.

Sample

The full sample code shows how to call WebViewer constructor to instantiate and load a document. You can load local/remote files of your choice.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales