14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to import documents into TinyMCE

April 4th, 2024

4 min read

The import from word feature show by a document icon with a letter W and arrow icons

Written by

Joe Robinson

Category

How-to Use TinyMCE

Customers often use more than one word processor, and often need to move content from one software to another. Collaboration when building content means importing content from other software, particularly MSWord, is an essential requirement. Learning how to import documents, and handle them through front end and server side stages is a significant time investment, but what can help speed up the process is out-of-the-box functionality for import document capability.

When creating a content builder for document management or learning content management (or another solution or use case) TinyMCE provides robust and flexible capabilities to support your application. TinyMCE is a rich text editor that provides import document capability through a useful Advanced feature, the Import from Word plugin.

In this how-to guide, you'll find the steps you need to set up the capability to import documents into your application through TinyMCE, with no additional configuration required.

Import document options in TinyMCE

TinyMCE provides the capability to import Word documents through the Import from Word plugin. The plugin works when TinyMCE is self-hosted (at the time of writing), with a plan to expand import from MSWord feature availability to work through Tiny Cloud. Check on the Import from Word documentation for the latest and most up-to-date information on the plugin's availability.

When configured, the Import from Word plugin unlocks the ability to select an MSWord document, and include the contents of the document into the TinyMCE text area. It provides a seamless connection between working on MSWord content, and then transferring the content to TinyMCE. It’s a complete import document solution. The plugin is available as an Advanced TinyMCE feature, which means you can access it alongside other Advanced features through a TinyMCE paid plan.

How to configure import document capability in TinyMCE

The following steps show how the Import from Word plugin works using a Learning Management System (LMS) example drawn directly from the TinyMCE LMS solution. There are some prerequisites to know when starting out. You'll need:

  1. Some understanding and knowledge of HTML and JavaScript
  2. The option to set up TinyMCE self hosted
  3. An MSWord document ready for testing the import document capability
  4. A TinyMCE API key

On your API key: Your FREE TinyMCE API key is available now on your TinyMCE dashboard, which you can access with Google or GitHub credentials. Your
API key comes with a 14-day FREE Trial of TinyMCE's Advanced features, such as Import from Word.

1. Configure TinyMCE for self hosting

Navigate to the TinyMCE self-hosted download page, and select the version of TinyMCE to download for self hosting.

The TinyMCE download page

Create a demo folder in your development environment, unzip the downloaded TinyMCE .zip file, and then move the TinyMCE self-hosted folder into the parent demo folder:

mkdir dms-system/
cp -r /path/Downloads/tinymce/ /path/dms-system/

2. Including Advanced Features

Change into the dms-system/ demo folder, and create a new index.html file. Paste the following TinyMCE configuration into the new index.html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LMS use-case demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./tinymce/js/tinymce/tinymce.min.js"></script> //path to your self-hosted TinyMCE folder
<script>
  tinymce.init({
    selector: "#editor",
    plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code editimage emoticons footnotes fullscreen image link linkchecker lists markdown media mediaembed mergetags powerpaste preview table tableofcontents tinymcespellchecker typography wordcount",
    toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
    statusbar: false,
    toolbar_sticky: true,
    mediaembed_max_width: 800,
    a11y_advanced_options: true,
    a11ychecker_html_version: 'html5',
    a11ychecker_level: 'aa',
    typography_default_lang: 'en-US',
    mergetags_list: [
      {
        title: "Course",
        menu: [{
          value: 'Course.Name',
          title: 'Course Name'
        },
        {
          value: 'Course.Teacher.Name',
          title: 'Teacher Name'
        },
        {
          value: 'Course.Department.Head',
          title: 'Department Head'
        }
        ]
      },
      {
        title: "Assignment",
        menu: [{
          value: 'Assignment.Name',
          title: 'Assignment Name'
        },
        {
          value: 'Assignment.DueDate',
          title: 'Assignment Due Date'
        }
        ]
      },
      {
        title: "Student",
        menu: [{
          value: 'Student.Name',
          title: 'Student Name'
        },
        {
          value: 'Student.ID',
          title: 'Student ID'
        },
        {
          value: 'Student.Email',
          title: 'Student Email'
        }
        ]
      }
    ],

    content_style: `
      body {
        max-width: 800px;
        margin: auto;
        font-family: 'Asap', serif;
        font-size: 17px;
        color: #222f3e;
      }

      h1, h2, h3, strong {
        font-weight: 550;
      }

      table th,
      table thead td {
        background-color: #ecf0f1;
        font-weight: 550;
        text-align: left;
      }

      table caption {
        display: none;
      }

      table[data-mce-selected="1"] caption {
        display: table-caption;
      }

      .mce-footnotes {
        font-size:12px;
      }
    `
  });
</script>
<style>
  body {
    margin: 60px 16px;
    background-color: #fafafc;
    color: #222f3e;
  }
  .editor-wrap {
    max-width: 1200px;
    margin: auto;
  }
</style>
</head>
<body>
<div class="editor-wrap">
  <textarea id="editor">
    <h1>Assignment #3: Color Theory</h1>
    <p>Hello<span title=""> </span>{{Student.Name}},</p>
    <p>For this week's assignment, you will learn the basics of color theory.</p>
    <p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote"><a href="#footnotes_entry_83179098411662742784603">1</a></sup> consulted. Contact {{Course.Teacher.Name}} or {{Course.Department.Head}} if you have any questions about the assignment.</p>
    <h2>This week's tasks</h2>
    <p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
    <h3>Topic List</h3>
    <ul>
      <li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote"><a href="#footnotes_entry_98446634721662742994322">2</a></sup> Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
      <li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
      <li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
      <li>Wassily Kandinsky states <span title="“">“</span>Color is a power which directly influences the soul.<span title="”">”</span><sup id="footnote_34341905131662743043554" class="mce-footnote"><a href="#footnotes_entry_34341905131662743043554">3</a></sup> Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
    </ul>
    <h3>Also...</h3>
    <ul>
      <li>Think about the difference between mixing colors using colored lights vs using paint.</li>
      <li>Pay extra attention to the different complementary color models.</li>
    </ul>
    <blockquote>
      <p><span title="“">“</span>Color is a power which directly influences the soul.<span title="”">”</span><br><span style="color: #95a5a6;"><em><span title="–">–</span><span title=""> </span>Wassily Kandinsky<span title=""> </span></em></span></p>
    </blockquote>
    <h2>Deadlines</h2>
    <p>Please submit your tasks before {{Assignment.DueDate}}</p>
    <h2>Grading Criteria</h2>
    <table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
      <thead>
        <tr>
          <th style="width: 18.0915%;" scope="col"><span title=""> </span></th>
          <td style="width: 18.0915%;" scope="col">High Achievement</td>
          <td style="width: 18.2224%;" scope="col">Good Achievement</td>
          <td style="width: 18.2224%;" scope="col">Pass</td>
          <td style="width: 18.2224%;" scope="col">Fail</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th style="width: 18.0915%;" scope="col">Demonstrated knowledge of color theory</th>
          <td style="width: 18.0915%;">The student shows an outstanding knowledge and command of color theory concepts</td>
          <td style="width: 18.2224%;">The student shows good knowledge and understanding of color theory concepts</td>
          <td style="width: 18.2224%;">The student shows some knowledge of color theory and a basic understanding of color theory concepts</td>
          <td style="width: 18.2224%;">The student has not demonstrated knowledge of color theory, or the concepts of color theory.</td>
        </tr>
        <tr>
          <th style="width: 18.0915%;" scope="col">Argument composition skills</th>
          <td style="width: 18.0915%;">The student shows an outstanding argument composition skills</td>
          <td style="width: 18.2224%;">The student shows good argument composition skills</td>
          <td style="width: 18.2224%;">The student shows some argument composition skills.</td>
          <td style="width: 18.2224%;">The student does not show clear argument composition skills</td>
        </tr>
        <tr>
          <th style="width: 18.0915%;" scope="col">Consulted resources</th>
          <td style="width: 18.0915%;">The student shows they have consulted excellent resources</td>
          <td style="width: 18.2224%;">The student has consulted good resources</td>
          <td style="width: 18.2224%;">The student has consulted some resources required for the assignment</td>
          <td style="width: 18.2224%;">The student has not consulted adequate resources</td>
        </tr>
        <tr>
          <th style="width: 18.0915%;" scope="col">Writing, Grammar, and Clarity</th>
          <td style="width: 18.0915%;">The student shows a command of the language in their work</td>
          <td style="width: 18.2224%;">The student shows effective writing skills</td>
          <td style="width: 18.2224%;">The student shows clear writing skills</td>
          <td style="width: 18.2224%;">The student shows unclear writing skills</td>
        </tr>
      </tbody>
    </table>
    <p><span title=""> </span></p>
    <div class="mce-footnotes">
      <hr>
      <ol>
        <li id="footnotes_entry_83179098411662742784603"><a class="mce-footnotes-backlink" href="#footnote_83179098411662742784603">^<span title=""> </span></a><span class="mce-footnotes-note">AMA Style Guide.<span title=""> </span><a href="<a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a>"><a href="https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html">https://owl.purdue.edu/owl/research_and_citation/ama_style/index.html</a></a>. Accessed September 9, 2022.<span title=""> </span></span></li>
        <li id="footnotes_entry_98446634721662742994322"><a class="mce-footnotes-backlink" href="#footnote_98446634721662742994322">^<span title=""> </span></a><span class="mce-footnotes-note">Color theory. Wikipedia. <a href="<a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a>"><a href="https://en.wikipedia.org/wiki/Color_theory">https://en.wikipedia.org/wiki/Color_theory</a></a>. Published September 3, 2022. Accessed September 24, 2022.<span title=""> </span></span></li>
        <li id="footnotes_entry_34341905131662743043554"><a class="mce-footnotes-backlink" href="#footnote_34341905131662743043554">^<span title=""> </span></a><span class="mce-footnotes-note">Kandinsky W. A quote from concerning the spiritual in art. Goodreads. <a href="<a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a>"><a href="https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul">https://www.goodreads.com/quotes/90420-colour-is-a-power-which-directly-influences-the-soul</a></a>. Accessed September 14, 2022.<span title=""> </span></span></li>
      </ol>
    </div>
  </textarea>
</div>
</body>
</html>

Save the change.

3. Adding import document capability

✏️NOTE: In production, when self-hosting TinyMCE, using Advanced features requires a paid TinyMCE plan. When you've set up a paid plan, you can then gain access to Advanced features, self-hosting the plugin files alongside the Core TinyMCE features. The next steps in the Demo show how an import document self-hosted solution would work if Advanced features are unlocked.

Include the Import from Word plugin in the TinyMCE init script alongside the plugins and toolbar options:

tinymce.init({
    selector: "#editor",
    plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code editimage emoticons footnotes fullscreen image link linkchecker lists markdown media mediaembed mergetags powerpaste preview table tableofcontents tinymcespellchecker typography wordcount importword",
    toolbar: "undo redo | importword | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
    //Added between "undo redo" and "blocks" toolbar buttons

Next, add the importword_service_url option to the TinyMCE init script. In production, this url is provided for you to configure.

✏️NOTE: The service URL configured here is not a valid URL. You can check on the Import from Word demo page to test out the import document steps.

    statusbar: false,
    toolbar_sticky: true,
    mediaembed_max_width: 800,
    a11y_advanced_options: true,
    a11ychecker_html_version: 'html5',
    a11ychecker_level: 'aa',
    typography_default_lang: 'en-US',
    importword_service_url: 'https://importdocx.convert/converstion/converted/docx-html',
    mergetags_list: [

Save the changes. In production, you would now be able to test out importing a document, which would resemble the following:

The import document capability working in TinyMCE

Import document, and more TinyMCE document management solutions

Beyond a seamless import document capability through the Import from Word plugin, TinyMCE offers an array of other useful capabilities for document management solutions. You can see an array of features in action through the tutorial available on
configuring TinyMCE to create a DMS that rivals MSWord and Google Docs.

Other DMS resources you can consult for more information are:

Contact us for more information on how TinyMCE can help shape your document management and import document solutions.

Try TinyMCE 7 today as open source, or get our new Advanced plugins with a commercial licence

DMSIntegrationUse Cases
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCEMay 22nd, 2024

    Understanding accessible documents and options from TinyMCE

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.