How to Export TinyMCE Content to MS Word Document

TinyMCE is the most advanced WYSIWYG HTML editor used in the web application for adding HTML editor to textarea. TinyMCE provides a simple way to convert Textarea to HTML editor in the web page. In the earlier tutorial, we had provided the step-by-step guide and example code to add TinyMCE WYSIWYG editor to textarea. But sometimes TinyMCE functionality needs to be extended with some advanced feature. Export editor content to Word document is one of the most desired functionality for TinyMCE editor.

In this tutorial, we will show how you can easily add the export feature to the TinyMCE editor using a plugin. The plugin extends the functionality of TinyMCE editor. Using TinyMCE plugin you can export TinyMCE editor content to MS Word document.

We have developed a simple and powerful TinyMCE plugin called ExportToDoc. The ExportToDoc plugin adds export functionality to TinyMCE and helps the user to export HTML content to Microsoft Word document and save in .doc format.

TinyMCE ExportToDoc Plugin

The ExportToDoc plugin adds an export button to the menu of the TinyMCE editor. By clicking the Export to Doc button, TinyMCE editor content HTML will be converted to Microsoft Word document in the same format and you can save it to your computer as a .doc file.


To enable the TinyMCE ExportToDoc plugin, you need to do the following configuration.

  • Add ExportToDoc to plugins list.
  • Add Export to Doc button to the toolbar.


    selector: "textarea",
    plugins: "ExportToDoc",
    toolbar: "ExportToDoc"

Configuration Options

These settings affect the execution of the ExportToDoc plugin.

This option allows you to specify the file name.

  • Type: String (The default is tinymce-content.)


    selector: "textarea",
    plugins: "ExportToDoc",
    toolbar: "ExportToDoc",
    etd_file_name: "tinymce-content"

TinyMCE Editor with Export to Word Plugin

This example adds a full featured TinyMCE editor to the textarea with Export to MS word feature.


<textarea name="myTextarea" ></textarea>


    selector: 'textarea',
    height: 300,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help',
    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | ExportToDoc',
    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
    image_advtab: true

You can also specify the element ID as a selector, like selector: #myTextarea".

Related Articles

Comments 0