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

How to build a DMS app with TinyMCE Cloud

Joe Robinson

June 13th, 2022

Written by

Joe Robinson

Category

How-to Use 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.

  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 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 

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

  1. Create an index.html file.

  2. 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>;
  1. Add another pair of script tags, add the following JavaScript. It’s the tinymce.init method, and it’s how you control TinyMCE:

<script>
        tinymce.init({
            selector: "#editor",

            plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",

            toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments  | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
            height: '700px'
                });
</script>
  1. 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.

  2. 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.

  1. Include lines to change the icon and toolbar appearance. Also include the following CSS content to add some style to the DMS content:

<script>
        tinymce.init({
            selector: "#editor",

            plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",

            toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments  | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
            height: '700px',
            toolbar_sticky: true, //Adding design elements for TinyMCE
            icons: 'thin',
            content_style: ` //Adding important design elements for the DMS content
                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. Include additional TinyMCE configuration to activate the Comments plugin, and the autosave feature:

<script>
        tinymce.init({
            selector: "#editor",

            plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",

            toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments  | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
            height: '700px',
            toolbar_sticky: true,
            icons: 'thin',
            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
                    }
                }
              `,
            autosave_restore_when_empty: true, //Add autosave and comments configuration
            tinycomments_mode: 'embedded',
            tinycomments_author: 'john.doe',
            tinycomments_author_name: 'John Doe'
      });
</script>
  1. 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>
  1. 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.

  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;">What’s your Document Management editing project? </h1>
        <p style="text-align: center;">Are you:</p>
  1. Include an HTML table in the demo:

<h1 style="text-align: center;">What’s your Document Management editing project? </h1>
        <p style="text-align: center;">Are you:</p>
       <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 class="tox-checklist">
            <li class="tox-checklist--checked">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>Any other functionality that you would expect in a document editor!</li>
        </ul>
  1. 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.

TextareaTiny CloudConfigurationDMS
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 set up a CMS editor with TinyMCE Cloud

    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