Export to 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 export to Microsoft Word feature collects the HTML generated with the tinymce.editor.getContent() method and combines it with the default editor content styles along with the styles provided in the plugin configuration. The combined content and styles are then processed by the included server-side converter service, which can be either self-hosted or cloud-based. Following this processing, a Word file is generated, which is subsequently returned to the user’s browser, enabling them to save it in the Word format onto their disk or drive.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="exportword">
  <h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
  <p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>

  <figure class="image">
    <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
          alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" width="573" height="429">
    <figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
  </figure>
  
  <p>Photo by <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>

  <h2>Project Goals</h2>
  <p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners. The primary goals include:</p>
  <ul>
    <li><strong>Empowering educators</strong> with intuitive tools for content creation, course management, and student assessment.</li>
    <li><strong>Enhancing the learning experience for students</strong> through engaging content delivery, interactive features, and personalized learning paths.</li>
    <li><strong>Increasing accessibility and scalability</strong> to cater to diverse learning needs and support a growing user base.</li>
  </ul>
  
  <h2>System Features</h2>
  <p>Streamline is designed to enrich the learning process through a comprehensive set of features:</p>
  <ul>
    <li><strong>Content Management System (CMS)</strong>: An intuitive interface enabling educators to create and upload various learning materials, including videos, documents, presentations, and quizzes.</li>
    <li><strong>Course Management Tools</strong>: Structure courses with clear objectives, organize content modules, and manage student enrollments effectively.</li>
    <li><strong>Interactive Learning Activities</strong>: Includes gamification, discussion forums, collaborative assignments, and more to maintain student engagement.</li>
    <li><strong>Assessment & Analytics</strong>: Tools for creating quizzes, tracking student progress, generating reports, and identifying improvement areas.</li>
    <li><strong>Personalized Learning Paths</strong>: Machine learning algorithms provide tailored content recommendations based on student progress and needs.</li>
  </ul>
  
  <h3>Table 1: Streamline - Target User Groups</h3>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th style="text-align: left;">User Group</th>
        <th style="text-align: left;">Benefits</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Educators</strong></td>
        <td>Easy content creation, efficient course management, and valuable student insights.</td>
      </tr>
      <tr>
        <td><strong>Learners</strong></td>
        <td>Engaging learning experience, personalized learning paths, and interactive collaboration.</td>
      </tr>
      <tr>
        <td><strong>Administrators</strong></td>
        <td>Scalable platform management, user access control, and comprehensive reporting tools.</td>
      </tr>
    </tbody>
  </table>
  
  <h2>Technology Stack</h2>
  <p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
  <ul>
    <li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
    <li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
    <li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
    <li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
  </ul>
  
  <h2>Project Timeline</h2>
  <ul>
    <li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
    <li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
    <li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
    <li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
  </ul>
  
  <blockquote>
    <p><em>This timeline is preliminary and may be subject to change.</em></p>
  </blockquote>
  
  <h2>Conclusion</h2>
  <p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
</textarea>
tinymce.init({
  selector: 'textarea#exportword',
  height: '800px',
  plugins: [
    "exportword", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "undo redo | exportword | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  exportword_converter_options: {
    document: {
      size: 'A4',
      margins: {
        top: "1in",
        bottom: "1in",
        left: "1in",
        right: "1in"
      }
    }
  }
});
Export to Word known issues
  • The generated .docx file may not be fully compatible with older versions of Word.

  • Enhanced Media Embed will not be included in the exported document, resulting in a console.error "The Export to Word plugin requires the exportword_service_url to be configured".

Basic setup using the Tiny Cloud service

To add the Export to Word plugin to the editor, add exportword to the plugins option in the editor configuration.

For example:

tinymce.init({
  selector: 'textarea',
  plugins: 'exportword',
  toolbar: 'exportword',
});
When using the Export to Word plugin with the Tiny Cloud service, JWT authentication is required to use the service. For more information on how to set up JWT authentication with Export to Word, see examples:

Basic setup using the self-hosted service

To use the self-hosted version of the Export to Word plugin, you need to set the exportword_service_url option to the URL of the service.

For example:

tinymce.init({
  selector: 'textarea',
  plugins: 'exportword',
  toolbar: 'exportword',
  exportword_service_url: 'http://localhost:8080/' // Update with the URL of the service you are using such  as 'http://myserver.com/'
});

The exportword_service_url option automatically appends /v2/convert/html-docx to the URL provided, so only the base URL is required. For example, if the service is hosted at http://localhost:8080/v2/convert/html-docx, the exportword_service_url option should be set to http://localhost:8080/. When using in production, ensure that exportword_service_url is updated to the production URL such as https://myserver.com/.

Options

The following configuration options affect the behavior of the Export to Word plugin.

exportword_service_url

The Export to Word plugin uses an HTML-to-DOCX converter service to generate Word files.

This option is required when configuring the Export to Word plugin for on-premise setups. If you require access to this feature, please contact us. For detailed instructions on deploying the Export to Word service server-side component using Docker, refer to the on-premises documentation.

When using a custom host, set the exportword_service_url option in your TinyMCE configuration to match your host. For example, if your custom host is mycustomhost.com, set the URL to https://mycustomhost.com/.

Type: String

Example: Setting up exportword_service_url

tinymce.init({
  selector: 'textarea',
  plugins: 'exportword',
  toolbar: 'exportword',
  exportword_service_url: '<service_URL>' // required for On-premise setups only
});

exportword_token_provider

The exportword_token_provider option enables integration with a token-based authentication service for exporting Word documents. It provides a mechanism to fetch an authentication token from a specified endpoint. This ensures that the export process can securely communicate with the server.

Type: Function

Default value: undefined

Example: using exportword_token_provider

tinymce.init({
  selector: 'textarea',
  plugins: 'exportword',
  toolbar: 'exportword',
  exportword_token_provider: () => {
    return fetch('http://localhost:3000/jwt', { // specify your token endpoint
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
    }).then(response => response.json());
  },
});
The exportword_token_provider option is required when using the Tiny Cloud service. For more information on how to set up JWT authentication with Export to Word, see examples:

exportword_converter_options

The exportword_converter_options option, is used to specify and configure various options related to the process of converting and exporting content from the editor to .docx Word file.

Type: Object

As of TinyMCE 7.5.0, the default value of the exportword_converter_options setting has been updated to the following:
Default value:
exportword_converter_options: {
  document: {
    size: 'letter'
  }
}

Example: using exportword_converter_options

tinymce.init({
  selector: 'textarea',
  plugins: 'exportword',
  toolbar: 'exportword',
  exportword_service_url: '<service_URL>', // required if using On-premises service
  exportword_converter_options: {
    headers: {
      first: {
        html: "<p>My document header</p>",
        css: "p { color: gray; }"
      },
      default: {
        html: "<p>My default header</p>",
        css: "p { color: blue; }"
      }
    },
    footers: {
      odd: {
        html: "<p>My odd footer</p>",
        css: "p { font-size: 10px; }"
      },
      even: {
        html: "<p>My even footer</p>",
        css: "p { font-size: 12px; }"
      }
    },
    document: {
      orientation: "landscape",
      size: "a3",
      margins: {
        top: "10mm",
        bottom: "10mm",
        left: "20mm",
        right: "15mm"
      }
    },
  },
});
To use this option, the Export to Word plugin requires the exportword_service_url option to be configured.

For comprehensive details regarding the exportword_converter_options, please refer to the API documentation available for the Export to Word Premium plugin.

exportword_converter_style

The exportword_converter_style option allows for customization of the styles applied to the exported Word document, providing flexibility in controlling its appearance; however, this option does not affect the distinct styling of the header and footer.

Type: String

Default value: ''

Example: using exportword_converter_style

tinymce.init({
  selector: 'textarea.tinymce',
  plugins: 'exportword',
  toolbar: 'exportword',
  exportword_service_url: '<service_URL>', // required if using On-premises service
  exportword_converter_options: {
    headers: {
      first: {
        html: "<p>My document header</p>",
        css: "p { color: gray; }"
      },
      default: {
        html: "<p>My default header</p>",
        css: "p { color: blue; }"
      }
    },
  },
  exportword_converter_style: 'p { color: cyan !important }' // will override the set <p> tag styles in the HTML content
});

Commands

The Export to Word plugin provides the following TinyMCE commands.

Command Description

ExportWord

Uses editor.getContent() and generates a new document.docx Word file that can be saved to local disk.

Examples
tinymce.activeEditor.execCommand('ExportWord');

API Reference

Explore the comprehensive API documentation for the Export to Word Premium plugin at Export to Word API Reference Documentation.