How to configure DMS with TinyMCE

While document storage and retrieval are essential, you also need to be careful you’re not missing important, some would say small, details. When planning how your Document Management System (DMS) works (and this is true whether you’re building an internal DMS or you have a DMS app in the planning phase) there’s one component that can let everyone down.

Unless you have a great writing experience, no one is happy.

It lies at the very heart of document management – a rich text editor – and thankfully it’s a component that’s easy to upgrade and integrate. By improving the usability of your system and giving writers a clean, familiar interface (just like MS Word and GDocs) it’s a support element your DMS can’t be without.

Here’s why and how it can be incorporated:

Rapid customization: TinyMCE’s code is customizable, so it doesn’t require a huge investment of time = save developer effort and hours.
Diverse features: With plugins like PowerPaste, Exports, Advanced Media Embed, Print, AutoSave, and Word Count, your writers can draft, modify, and publish every type of document they need (even with emoji if you need).
Fast integration: Using Tiny Cloud, you can activate TinyMCE in your project within minutes.

This article explains how to quickly get started using TinyMCE in a DMS.

What you need to get started

First, you need an API key. This key gives you free access to TinyMCE premium plugins for 14 days. There are two links to follow.

Navigate to the pricing plans for TinyMCE. Choose the plan that fits your app.
Go directly to the Get-tiny sign up page to get your FREE API key

Enter the information you would like for your account, and select Sign up. When you arrive at the dashboard screen, your API key is at the top center of the page.

You can use TinyMCE without an API key. However there will be warning messages in the text editor area, however.

This domain is not registered with Tiny Cloud.  Please see the quick start guide or create an account

Adding your API key to your app or project removes those warning messages. Here’s how to do that.

Set up TinyMCE Cloud

This video outlines the process:

Hey there it's John from tiny and in this video i'm going to show you how to get started with our document management system starter config loading tiny mce from the cloud we put the starter config together for anybody looking to add rich text editing to their dms or dms style app the starter config comes pre-loaded with all the features and plugins you need to offer your users a world-class document editing solution within your app we put it together based on dms best practices and looking at the hundreds of dms applications that use tinymce as their editor okay so let me show you how to add it to your project right now i have a text editor open with a local server running on my computer of course you'll want to add the dms starter config directly into your app to test it out so i'm going to head over to our website and go to the dms page which i have open here and i'm going to scroll down to the starter config section you'll see there's an option to view the starter config with code tips i'm going to choose that the code tips help you understand the settings that we've chosen for the starter config and pointing to the docs in case you want to find out more about a specific option i'm going to copy the starter config and paste it into my editor i'll save my file and reload it in my browser great there it is but we're still not seeing all of the features included in the starter config you'll see a notice here that says this domain is not registered with tiny cloud what we have to do is add our cloud api key to the config to make sure that all the plugins load properly and we can get rid of this error i've already got an account with tiny cloud so all i have to do is copy the api key go into my editor and replace this no api key text with my api key save the file reload the editor and here we are we have all of the dms editing capabilities that come in the dms starter config now if you don't yet have an api key you can head over to our pricing page choose a plan start a 14 day free trial and then you'll get your api key that you can use to load the starter config okay so now you've got the dms starter config loaded into your app what's next you can start playing with the config to customize it exactly to what your app needs you can add and remove plugins and modify the toolbar to your liking you'll also want to learn how to get and set content from tinymce i've attached a link to a helpful article in the description so you can learn how to do this and of course if you ever get stuck with tinymce if you're on one of our paid plans you can take advantage of our world-class professional support team if you're on one of the free plans you can also check out stack overflow for free community support we're going to be releasing a lot more content around document management system editing best practices so be sure to check out our blog and stay tuned for more videos good luck

The following configuration is a demo you can follow, to try out TinyMCE in a DMS.

Create an index.html file
Add the HTML boilerplate content including the head and body tags
With your file open, in the head section, add script tags, and reference TinyMCE Cloud through a CDN link within the script tags. This is what the link looks like:

https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js

And this is where it goes in the index.html file:

<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;

Add another pair of script tags, add the following JavaScript. It’s the tinymce.init method for controlling TinyMCE.

  <script>
    tinymce.init({
      selector: "#editor",
    });
  </script>

In the body of your index.html file, add textarea tags, and then save the document. These textarea tags give TinyMCE something to act on.
Test run the index.html file by opening it in your browser, or use a local server command with Python or PHP:

TinyMCE 6 loading in the browser for the first time

This means you’ve successfully tested TinyMCE (Nice work!). It’s time, now, to show you how TinyMCE works within your DMS.

Configure TinyMCE for a versatile DMS

The first change to make is some additional configuration added to the tinymce.init script.

Include lines to change the icon and toolbar appearance. Also include the following CSS style content for TinyMCE to create a DMS editor:

<script>
    tinymce.init({
      selector: "#editor",
      plugins: "advcode advlist advtable anchor autocorrect autolink autosave casechange charmap checklist codesample directionality editimage emoticons export footnotes formatpainter help image insertdatetime link linkchecker lists media mediaembed mergetags nonbreaking pagebreak permanentpen powerpaste searchreplace table tableofcontents tinycomments tinymcespellchecker visualblocks visualchars wordcount",

      toolbar: "undo redo spellcheckdialog | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments  | align lineheight checklist bullist numlist | indent outdent | removeformat",

      spellchecker_active: true,
      spellchecker_language: 'en_US',
      spellchecker_languages: 'English (United States)=en_US,English (United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv',

      tinycomments_mode: 'embedded',
      tinycomments_author: 'rmartel',
      tinycomments_author_name: 'Rosalina Martel',
      tinycomments_author_avatar: 'https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg',

      sidebar_show: 'showcomments',

      mergetags_list: [
        {
          value: 'Document.Title',
          title: 'Document Title'
        },
        {
          value: 'Publish.Date',
          title: 'Publish Date'
        },
        {
          value: 'Author.Name',
          title: 'Author Name'
        }
      ],

      content_style: `
        body {
          background: #fff;
        }
        @media (min-width: 840px) {
          html {
            background: #eceef4;
            min-height: 100%;
            padding: 0 .5rem;
          }
          body {
            background-color: #fff;
            box-shadow: 0 0 4px rgba(0, 0, 0, .15);
            box-sizing: border-box;
            margin: 1rem auto 0;
            max-width: 820px;
            min-height: calc(100vh - 1rem);
            padding:4rem 6rem 6rem 6rem;
          }
        }
      `,
    });
  </script>

Next, for the DMS framework around the rich text editor on the page, include style tags in your index.html head content:

  <style>
    body {
      margin: 4rem auto;
      padding: 0 2rem;
      background-color: #f9f9fb;
    }

    main {
      width: 100%;
    }
  </style>

Save and reload the demo. You should see the beginnings of TinyMCE’s DMS abilities in your browser:

The DMS design working with TinyMCE 6

TinyMCE with DMS content in action

With TinyMCE configured, add some example documentation to see the DMS configuration in action.

This content appears on the TinyMCE DMS Editor page.

In the body content of your index.html file there should be textarea tags from the previous steps. Add a heading and paragraph inside the textarea tags:

<h1 style="text-align: center;"><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_95621585221662750341026" data-mce-annotation="tinycomments">What’s</span> your Document Management editing project? </h1>
      <p style="text-align: center;">Are you:</p>

Include an HTML table in the demo:

<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup>
        <tbody>
          <tr>
            <td style="text-align: center;"><strong><span style="font-size: 36pt;">📝</span><br><br>Building a next-generation document creation solution</strong> and want to offer the best rich text editing experience to your content creators?</td>
            <td>
              <p style="text-align: center;"><span style="font-size: 36pt;"><strong>🗂️</strong></span></p>
              <p style="text-align: center;"><strong>Developing an innovative documentation system</strong> to organize, track, store, and share documents, and you want to add editing capabilities?</p>
            </td>
          </tr>
        </tbody>
      </table>

Add the additional paragraphs, and an unordered list:

  <p style="text-align: center;">Or perhaps it’s both? Then use the only WYSIWYG editor that’s trusted by <a href="<a href="https://tiny.cloud">https://tiny.cloud</a>" target="_blank" rel="noopener">1.5M developers</a>.</p>
      <h3>Curious about TinyMCE?</h3>
      <p>Play with this demo to see how TinyMCE works! Try out these popular document creation functions:</p>
      <ul>
        <li>Copy complex rich content from another app into the editor</li>
        <li>Add or resolve a comment</li>
        <li>Drag-and-drop an image from your computer, then edit it within TinyMCE</li>
        <li>Insert {{dynamic.content}} into the document using Merge Tags (start typing "{{")</li>
        <li>Any other functionality that you would expect in a document editor!</li>
      </ul>
      <p>Watch the video below to see how easy it is to get started (embedded in one click using <em>Enhanced Media Embed</em>):</p>
      <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 650px;" data-ephox-embed-iri="<a href="https://www.youtube.com/watch?v=_Pp1xnhQqec">https://www.youtube.com/watch?v=_Pp1xnhQqec</a>"><iframe style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0px;" src="<a href="https://www.youtube.com/embed/_Pp1xnhQqec?rel=0&amp;controls=0">https://www.youtube.com/embed/_Pp1xnhQqec?rel=0&amp;controls=0</a>" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div><!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzk1NjIxNTg1MjIxNjYyNzUwMzQxMDI2Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fOTU2MjE1ODUyMjE2NjI3NTAzNDEwMjYiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl85NTYyMTU4NTIyMTY2Mjc1MDM0MTAyNiIsImF1dGhvciI6InJtYXJ0ZWwiLCJhdXRob3JOYW1lIjoiUm9zYWxpbmEgTWFydGVsIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItUm9zYWxpbmFNYXJ0ZWwuanBnIiwiY29udGVudCI6IkNhbiB3ZSBpbmNyZWFzZSB0aGUgc2l6ZSBvZiB0aGUgaGVhZGluZz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE5OjA1OjQxLjAyNVoiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxOTowNTo0MS4wMjVaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzk5MTUxODA5MjE2NjI3NTA1NTM5MjYiLCJhdXRob3IiOiJhdmlzbWFyYSIsImF1dGhvck5hbWUiOiJBbmdlbCBWaXNtYXJhIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJTdXJlIHRoaW5nIOKAkyBob3cncyB0aGlzPyIsImNyZWF0ZWRBdCI6IjIwMjItMDktMDlUMTk6MDk6MTMuOTI2WiIsIm1vZGlmaWVkQXQiOiIyMDIyLTA5LTA5VDE5OjA5OjEzLjkyNloifV19fQ==-->
    </textarea>

Save and reload the DMS config. With the example contents added inside the textarea, the ability of TinyMCE to organize and format your DMS content becomes much clearer:

TinyMCE with DMS config running in a browser

The next steps for your DMS editor

Check out our DMS editor page for further information, and remember that your FREE API key grants free access to Premium Plugin functionality for 14 days, after which you need to either choose a Premium plan or remove the TinyMCE premium features.

What you get from TinyMCE’s Premium Plugins:

Error-free copy-paste from Word, Excel, and Google Docs with PowerPaste
Images editing, including crop, rotate, resize, and other filters with Enhanced Image Editing
Increased productivity and efficiency with with Spell Checker Pro and Link Checker

Contact us for more information if you have any questions on adding TinyMCE to your DMS app. Premium customers and anyone on a 14-day free trial has access to our enterprise-grade professional support team.