Import from Word plugin

This plugin is only available as a paid add-on to a TinyMCE subscription.
This feature is only available for TinyMCE 7.0 and later.

The Import from Word plugin lets you import .docx (Word document) or .dotx (Word template) files into the editor. The process preserves formatting and rich media.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="importword">
  <h1 style="font-size: 1.5em; color: black; margin-top: 0; text-align: left;">Import from MS Word</h2>
  <ol style="padding-left: 20px; margin: 10px 0;">
      <li style="margin-bottom: 10px;">Click the <strong>Import from Word</strong> button in the toolbar or select <strong>File &gt; Import from Word</strong> in the menu.</li>
      <li style="margin-bottom: 10px;">Select the DOCX file to upload.</li>
      <li style="margin-bottom: 10px;">Edit the imported content however you wish.</li>
  </ol>
  <p style="font-size: 0.9em; color: #555; text-align: left; margin-top: 15px;">Learn more about <strong>Import from Word</strong> and our other document converters (<a href="https://tiny.cloud/tinymce/features/export-word/" style="color: #0066cc; text-decoration: none; border-bottom: 1px dotted #0066cc;">Export to Word</a> and <a href="https://tiny.cloud/tinymce/features/export-pdf" style="color: #0066cc; text-decoration: none; border-bottom: 1px dotted #0066cc;">Export to PDF</a>) at <a href="https://tiny.cloud" style="color: #0066cc; text-decoration: none; border-bottom: 1px dotted #0066cc;">https://tiny.cloud</a>.</p>
</textarea>
tinymce.init({
  selector: 'textarea#importword',
  height: '800px',
  plugins: [
    "importword", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
],
toolbar: "undo redo | importword | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});

Basic setup

To add the Import from Word plugin to the editor, add importword to the plugins option in the editor configuration.

For example:

tinymce.init({
  selector: 'textarea',
  plugins: 'importword',
  toolbar: 'importword',
  importword_service_url: '<service_URL>'
});

Options

The following configuration options affect the behavior of the Import from Word plugin.

importword_service_url

This option is used for setting the URL endpoint for the DOCX to HTML conversion service.

The Import from Word feature is currently only available exclusively for on-premise setups, requiring a self-hosted version of the DOCX to HTML conversion service and the importword_service_url option to be properly configured. If you require access to this feature, please contact us. Refer to our on-premises documentation for detailed instructions on deploying the Import from Word service server-side component using Docker.

Configure the importword_service_url setting in your TinyMCE instance to match your custom host. For example, if your host is mycustomhost.com, set the URL to https://mycustomhost.com/.

Type: String

Example: using importword_service_url

tinymce.init({
  selector: 'textarea',
  plugins: 'importword',
  toolbar: 'importword',
  importword_service_url: '<service-URL>'
});
If this string value is not configured it will return a console.error: The Import from Word plugin requires the importword_service_url to be configured. If the editor detects an invalid_URL, it will return a console.error: The value provided in importword_service_url is not a valid URL.

importword_converter_options

Type: String

As of TinyMCE 7.5.0, the default value of the importword_converter_options setting has been updated to the following:
Default value:
importword_converter_options: {
  formatting: {
    styles: 'inline',
    resets: 'inline',
    defaults: 'inline',
  }
}

The importword_converter_options setting allows you to customize the behavior of the Import from Word plugin when converting Word documents to HTML.

Example: using importword_converter_options
tinymce.init({
  selector: 'textarea',
  plugins: 'importword',
  toolbar: 'importword',
  importword_converter_options: {
    formatting: {
      resets: 'inline',
      defaults: 'inline',
      styles: 'none',
    }
  }
});
For more information on the available converter options, refer to the Import from Word API documentation.

Toolbar buttons

The Import from Word plugin provides the following toolbar buttons:

Toolbar button identifier Description

importword

Opens the import dialog so the user can select a specific .docx or .dotx file.

These toolbar buttons can be added to the editor using:

The Import from Word plugin provides the following menu items:

Menu item identifier Default Menu Location Description

importword

File

Opens the import dialog so the user can select a specific .docx or .dotx file.

These menu items can be added to the editor using:

Commands

The Import from Word plugin provides the following TinyMCE commands.

Command Description

ImportWord

Opens a file picker, that allows content from either a .docx or .dotx file to be imported into the editor.
Example
document.querySelector('button').addEventListener('click',
  () => tinymce.activeEditor.execCommand('ImportWord')
);
The ImportWord command cannot be directly invoked through a script at the top level or from the browser console. Instead, it necessitates a specific user action within the user interface, such as clicking a toolbar button. To ensure correct execution, the command should be called within the scope of an event handler tied to a specific user interaction, as shown in the example.

API Reference

Explore the comprehensive API documentation for the Import from Word Premium plugin at Import from Word.