Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Create a DMS app with TinyMCE Self-hosted and TinyMCE Cloud

Joe Robinson

June 14th, 2022

9 min read

Written by

Joe Robinson

Category

How-to Use TinyMCE

If you’re running a bank, you need security. Now more than ever. A self-hosted configuration offers a secure solution, while self-hosted software grants you additional security by giving you control over your software services.

No outside links are required to get the services you need working. But it’s not only big banks and financial institutions that need control, and self-hosting...

Depending on your business needs, there may be some level of security restrictions that prevent the use of links or connections to any server that’s not allowed to connect and talk to your network. Or, you may have a selection of services only you can access, and some you cannot. It can vary.

For DMS systems though, some things don’t vary at all:

Priority one: You need to keep your documents safe.

Also a priority: You need diverse features, customization, and text editing that’s easy to integrate.

To create secure documentation, self-hosted TinyMCE provides everything you need. It offers security by working with no outside connections (if that’s important), and a broad range of advanced features to help you create the documents you need.

That’s what you’ll find in this article – an explanation of how to try out TinyMCE Self-hosted

It also covers the process of combining TinyMCE Self-hosted with TinyMCE Cloud, to demonstrate how TinyMCE works for a multitude of DMS needs and hosting setups.

Whether you’re trying out Self-hosting for the first time, or giving it a test drive with the goal of transitioning across from Cloud to Self-hosted in the future, this guide explains what you need, the steps involved, and some additional considerations.

What you need to get started

TinyMCE Cloud component for DMS

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.

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

Enter the information 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.

TinyMCE Self-hosted component for DMS

The second thing you need is a copy of TinyMCE in .zip format.

  1. On the Get-tiny sign up page, click the Download TinyMCE SDK Now button. A .zip file then starts downloading into your downloads folder.

This .zip file is the actual rich text editor that you’ll host on your own workspace. For the following example config, it’ll run on your local workstation environment.

Why use an API key?

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

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 these warning messages.

Set up TinyMCE Self-hosted

The following video outlines the process:

And here's the transcript:

Hey there it's John from Tiny and in this video i'm going to show you how to set up tinymce's dms starter config self-hosted loading premium plugins from the cloud the dms starter config is a great starting off point if you're looking to add rich text editing capabilities to your dms we put it together based on industry best practices and looking at how hundreds of dms apps use tinymce for their rich text editing now you might be wondering why you'd self-host tinymce and then load the premium plugins from the cloud you might do this in a couple of scenarios you might already have tiny mce hosted within your app and you want to start adding premium capabilities in which case you can just load them from the cloud or maybe you're already self-hosting an app and you just want to try out tiny mce premium plugins either way it's super easy all right let's get started so just for the sake of demonstration i have a local web server running and i have a self host.html file here that i'm going to load the starter config into okay so the first step is to head over to tiny.cloud slash get dash tiny this is where you're going to download the zip file that you'd use for self hosting click the blue download button and it'll get downloaded your computer extract the zip file and load it into your javascript folder within your project okay great now we're going to go check out the tinymce dms starter config so go to tiny.cloud click solutions and then click on dms here you'll see a demo of the starter config and if you keep scrolling you'll see the starter config code snippet we've got it available without code tips and with code tips the code tips are really helpful if you're getting started with tinymc and you want to understand what each config option does and link back to the docs to learn more so i'm just going to copy that starter config head over to my html file paste it in there and the starter config loads tinymc by default from the cloud right here i'm going to put in the path to the tinymce min javascript file instead of the cloud url and i'll hit save and i'll go to reload my page okay so this looks good it's loading the dms starter config without the premium plugins but now we want to add the premium plugins from the cloud there's a really helpful article that shows you how to do this in our docs which i'll link to in the description of the video but the way it works is you load the tiny mce core library from your self-hosted location and then you load a plugins file from the cloud now in order to load the plugins file from the cloud you need a tiny mce api key if you haven't already signed up for an account you can go to tiny.cloud pricing choose a plan and start a free 14-day trial to get access to these premium plugins going back to the docs i'm going to copy this script tag and put it into my app under where i included tinymc now i'm going to go grab my api key and replace where it says no api key with my unique api key i'm going to save the document reload it and now i've got access to all those premium features that are included in the dms starter config okay so that's it now you're all started with the dms starter config self-hosted and loading premium plugins from the cloud if you'd like to load premium plugins self-hosted as well reach out to our sales team and they can set you up with a custom plan to do just that okay so what's next head into the starter config play around with the plugins the config options in the toolbar to make the starter config fit your app's needs of course you'll also want to learn how to get content and set content in tinymc i'll include a link to this article in the description of the video if you get stuck or just have any questions if you're on one of our 14 day free trials or paid plans you can reach out to our world-class professional support team otherwise you can always check stack overflow and post a question in the community in coming videos we'll be doing more and more on document management system rich text editing best practices so stay tuned also you can check out our blog for tips and tricks with tinymce and document management systems good luck

The first steps you to take for self-hosting TinyMCE is the following:

  1. Unzip the tinymce file you downloaded in the previous step (the file name - tinymce_6.0.3.zip or similar)
  2. Create a new directory for testing out TinyMCE Self-hosted for your DMS (try mkdir TinymceDMS for example)
  3. Move the unzipped tinymce folder into the directory

Get TinyMCE Self-hosted started

With the .zip file unzipped and saved in a new folder:

  1. Create a new index.html file in that directory.

  2. Include some boilerplate HTML:

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>TinyMCE in DMS</title>
</head>
  <body>
  </body>
</html>
  1. Inside the head of the document, add a pair of script tags, and reference the tinymce.min.js file (the Self-hosted configuration requires referencing TinyMCE from the html file). Here’s the pathway to use:

<script src="/tinymce/js/tinymce/tinymce.min.js"></script>;
  1. Configure TinyMCE by placing another script tag after the Self-hosted content, and include the tinymce.init script:

<script>
   tinymce.init({
     selector: "#editor"
</script>
  1. Add a pair of textarea tags into your html file body file, and give them the id of “editor”. Save the file, and then load the file in a browser, or use a local server with Python or PHP:

Here's how the complete, essential setup looks:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TinyMCE Document Management System (DMS)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  
  <script>
    tinymce.init({
      selector: "#editor",
    });
  </script>

</head>
<body>
  <main>
    <textarea id="editor"></textarea>
  </main>
</body>
</html>

 

Seeing the rich text editor load means you’ve successfully tested TinyMCE with a Self-hosted model (Well done!).

You can now set up TinyMCE Cloud to access premium plugins, and see a DMS in action.

TinyMCE Cloud and TinyMCE Self-hosted

  1. Within your index.html file in the head section, add script tags, and add a link to TinyMCE with your API key.

This is what the link looks like:

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

And this is where it goes in the index.html file (replace “your-api-key” with the API from your TinyMCE account dashboard):

<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/plugins.min.js"
  referrerpolicy="origin"
></script>;
  1. To your tinymce.init script, include the following lines to add plugins, change the icons, and expand the toolbar options. Also include the following CSS content to add some style to your DMS:

  <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>
  1. Next, for the DMS appearance around the rich text editor, include style tags in your index.html head content:

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

    main {
      width: 100%;
    }
  </style>
  1. Save and reload the demo. You should see the beginnings of TinyMCE’s DMS abilities in your browser:

TinyMCE as DMS content in action

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

This content is drawn from the TinyMCE DMS Editor page.

  1. 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>
  1. 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>
  1. 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>
  1. Save and reload the DMS config. With the example contents added inside the textarea, the ability for TinyMCE to organize your DMS content becomes clear:

TinyMCE running as a DMS 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.

This guide covers the steps to set up a hybrid TinyMCE Cloud and TinyMCE Self-hosted configuration.

You can configure a TinyMCE Self-hosted solution with premium plugins – if you need that completely secure configuration – when you sign up for a TinyMCE Premium pricing plan. Contact us for more information.

It’s important for your documentarians or customers to have a smooth and secure experience when they use your DMS. Especially if they need flexible, powerful features to create their varied documentation. TinyMCE provides those features and more, as well as supporting  your subject matter writers when they’re creating their documents.

TinyMCETiny CloudDMSSelf Hosting
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 TinyMCE

    How to configure URL validation in your app

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing