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. 

The following video explains the steps to get started with TinyMCE if you need to see the procedure in a different format:

The video transcript:

Hey there it's John from tiny and in this video i'm going to show you how to get started with our cms starter config in the tiny cloud so tinymce is used by many cmss out there including shopify joomla and ubraco so what we did was we looked at many of the cmss that use tinymce and we came up with a starter config to get you off to a good start including tinymce in your cms it's great if you're building a new cms from scratch if you're upgrading your current cms to have better rich text editing capabilities or if you're using a third-party cms and you want to add tiny mce so to get the config working in the cloud you're going to need to sign up for an api key at tiny.cloud you can head over to the pricing page and sign up for a free 14-day trial of our professional plan which contains all the plugins used in the starter cms config once you've signed up you'll end up logging into your tiny account page and this is where your api key is okay so the next step is to add tiny mce to your app so i have my code editor open here and i have three files open i have the html file where my cms is i have the starter config which you'll be able to find a link for in the description of this video and i also have some sample html which i'm going to use to show how the editor works so the first step is to take the code in the starter config and i'm going to copy all that you'll notice that there's some tips within this code you can remove those customize it as you want uh they're just a good way to get started to understand what each of the config options do so in my app here i have a text area and that's where i'm going to add tiny mce so i can add all those rich text editing capabilities so i'm going to go back to the starter config that i have here i'm going to copy all the code and paste it into my app now if i reload the app right now nothing's going to happen because i haven't told tinymce where to apply the editor so i just need to type in selector here so i'm going to put in text area and it'll be added to every text area on the page you can use any sort of css selector so you could use an id or a class as well whatever suits your app's needs so now you'll see this error that the domain's not registered with tinycloud that's because i haven't added my api key yet so i'm going to go back over to my account copy the api key and put it right here and now it should work great now if you're not on a premium plan or you're not in a free trial you'll probably see some errors saying that some plugins can't load so from here you have two options with the starter config you can either sign up for the free trial or you can disable the plugins that are premium only now at this point i should also mention tinymce has over 12 framework integrations that let you include the editor within your app's framework for example react view and angular so if you want to check those out google tinymc integrations and it'll bring you to our docs that lists all of the integrations so there you go you're all set with the tiny mce cms starter config it's pre-loaded with lots of popular features including power paste which allows clean copy and paste from microsoft word google docs and other html sources it's got accessibility checker to make sure whatever content your users are generating is compliant and many other advanced features so what's next now you can start playing with the config in your app you'll see all the plugins that we've added here and you can feel free to add and remove them as you need for your cms as well as play around with the toolbar and various other settings the docs are a great place to get started to learn how all these work you also want to configure your app to get and set content from tinymce so that it can be saved to your database this blog article shows you how to get and set content with tinymce i'll post a link in the description of the video and if you get stuck head over to stack overflow to post a question or if you're on a free trial or premium plan feel free to reach out to our support team in coming videos we'll dig into cms rich text editing best practices and talk a bit more about the plugins included in the config good luck.

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: 'a11ychecker advcode advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker visualblocks wordcount',

        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:

<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 set up a CMS with Self-Hosted and Cloud 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