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 an HTML editor on the web page. In the earlier tutorial, we 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 features. Exporting 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 the TinyMCE editor. Using the 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 it 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.

Installation

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.

Example

tinymce.init({
  selector: 'textarea',
  plugins: [
    'ExportToDoc'
  ],
  toolbar: 'ExportToDoc'
});

Configuration Options

These settings affect the execution of the ExportToDoc plugin.

etd_file_name: This option allows you to specify the file name of the exported document.

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

etd_button_text: This option allows you to specify the text label of the export button.

• Type: String (The default value is Export to Doc.)

Example

tinymce.init({
  selector: 'textarea',
  plugins: [
    'ExportToDoc'
  ],
  toolbar: 'ExportToDoc',
  etd_file_name: 'tinymce-content',
  etd_button_text: 'Export to Doc'
});

TinyMCE Editor with Export to Word Plugin

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

HTML:

<textarea id="myTextarea"></textarea>

JavScript:

<script>
tinymce.init({
    selector: '#myTextarea',
    height: 400,
    plugins: [
        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
        'table', 'emoticons', 'template', 'help', 'ExportToDoc'
    ],
    toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
        'forecolor backcolor emoticons | help ExportToDoc',
    etd_file_name: 'tinymce-content', // Set name of the word doc file
    etd_button_text: 'Export to Doc', // Set label of the export button
    menu: {
        favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
    },
    menubar: 'favs file edit view insert format tools table help',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});    
</script>

You can also specify the textarea element as a selector, like selector: 'textarea'.

Download ExportToDoc TinyMCE Plugin