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

How to set up a CMS editor with TinyMCE Cloud

Joe Robinson

May 4th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

As long as your users have an internet connection, they can access cloud apps anywhere.

For Content Management Systems, cloud has become the go-to hosting method because you’re running your CMS, or parts of your CMS, remotely with this configuration, which makes life easier for customers who want to manage their content anytime, anywhere. Just like how your CMS is in the cloud, TinyMCE can be easily loaded from the cloud as well.

This article explains Tiny Cloud for CMS developers – how to get started using a CMS editor demo with TinyMCE as your text editor.

Set up your CMS editor prerequisites

First, you will need an API key. To get your API key:

With an API key, you have 14 days free access to TinyMCE premium plugins. It activates when you use the key in your editor, and load it into a browser with premium plugins configured in the tiny.init script.

Without an API key, you cannot access Premium Plugins, and the text area produces a warning message: 

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

When you set up an API key with your CMS editor or any WYSIWYG CMS related configuration with TinyMCE, using your API key prevents these messages from making an appearance.

How to start your CMS editor with Tiny Cloud

These instructions show how to make a demo  that matches a CMS UI, and includes TinyMCE from the cloud. You can adapt these instructions to add TinyMCE to your existing or new CMS. 

Configure the API key:

  1. Log into your account, and scroll down to the TinyMCE Installation heading. Copy the HTML starter code.
  2. Create an index.html file
  3. Paste the started content into your new file:
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea>
    Welcome to TinyMCE!
  </textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak',
      toolbar_mode: 'floating',
    });
  </script>
</body>
</html>

Reconfigure the TinyMCE script

  1. Navigate to the CMS page and copy the CMS editor config.
  2. Paste the CMS editor config (minus the surrounding HTML elements) in place of the <script> tags containing the default tinymce.init script you copied from your cloud account screen.
<script>
      tinymce.init({
        selector: 'textarea',

        plugins: `powerpaste a11ychecker tinymcespellchecker linkchecker wordcount
         table advtable editimage autosave advlist anchor advcode image link lists
          media mediaembed searchreplace visualblocks template`,
        toolbar: `undo redo | styles | bold italic underline strikethrough | align
         | table link image media | bullist numlist outdent indent`,

        a11ychecker_level: 'aaa',

        style_formats: [
          {title: 'Heading 1', block: 'h1'},
          {title: 'Heading 2', block: 'h2'},
          {title: 'Paragraph', block: 'p'},
          {title: 'Blockquote', block: 'blockquote'},
          {title: 'Image formats'},
          {title: 'Medium', selector: 'img', classes: 'medium'},
        ],

        object_resizing: false,

        valid_classes: {
          'img': 'medium',
          'div': 'related-content'
        },

        image_caption: true,

        templates: [
          {
            title: 'Related content',
            description: 'This template inserts a related content block',
            content: '<div class="related-content"><h3>Related content</h3><p><strong>{$rel_lede}</strong> {$rel_body}</p></div>'
          }
        ],

        template_replace_values: {
          rel_lede: 'Lorem ipsum',
          rel_body: 'dolor sit amet...',
        },

        template_preview_replace_values: {
          rel_lede: 'Lorem ipsum',
          rel_body: 'dolor sit amet...',
        },

        noneditable_class: 'related-content',

        content_langs: [
          {title: 'English (US)', code: 'en_US'},
          {title: 'French', code: 'fr'}
        ],

        height: 540,

        content_style: `
          img {
            height: auto;
            margin: auto;
            padding: 10px;
            display: block;
          }
          img.medium {
            max-width: 25%;
          }
        `
      });
    </script>

Add CMS editor styling 

  1. Copy the following CSS script, and paste it into a style.css file:

body {
    font-family: 'Courier New', Courier, monospace;
}
.main-head {
    grid-area: header;
    border: solid black;
    border-radius: 5px;
    border-width: 1px;
}
.content {
    grid-area: content;
    border: solid white;
    border-radius: 5px;
    border-width: 1px;
}
.main-nav {
    grid-area: nav;
    border: solid black;
    border-radius: 5px;
    border-width: 1px;
}
.side {
    grid-area: sidebar;
    border: solid black;
    border-radius: 5px;
    border-width: 1px;
}
.main-footer {
    grid-area: footer;
    border: solid black;
    border-radius: 5px;
    border-width: 1px;
}
.wrapper {
    display: grid;
    gap: 15px;
    grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";
}

@media(min-width: 500px) {
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer";
    }
    nav ul {
        display: flex;
        justify-content: space-between;
    }
}

@media(min-width: 700px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer"
    }
    nav ul {
        flex-direction: column;
    }
}
  1. Link the CSS style sheet into the CMS editor:

<link rel="stylesheet" href="style.css">
  1. Update the HTML content to reference the CSS classes:

<body>

        <div class="wrapper">
            <header class="main-head">The header</header>
            <nav class="main-nav">
                <ul>
                    <li><a href="">Nav 1</a></li>
                    <li><a href="">Nav 2</a></li>
                    <li><a href="">Nav 3</a></li>
                </ul>
            </nav>

            <article class="content">
                        <textarea name="" id="textarea" cols="30" rows="10">
                            <p>Your CMS demo.</p>
                        </textarea>
            </article>

            <aside class="side">Sidebar</aside>
            <footer class="main-footer">The footer</footer>
        </div>

        </body>
  1. Save the changes, and load the app in a browser:

CMS editor example working with TinyMCE

More information for your CMS editor

Head over to our CMS editor product page to see another demo in action. It’s available with and without comments in the HTML to explain what each aspect of TinyMCE is doing.

Remember that your FREE API key grants access to Premium Plugin functionality for 14 days, after which you will need to either choose a premium plan or remove TinyMCE premium features from your CMS.

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
  • Automatic, embedded video and media with Enhanced Media Embed

Sign up today to try these Premium Plugins in your CMS

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

WYSIWYGHTMLCMSTinyMCE
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 load and post Ajax content in TinyMCE

    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