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

How to set up a CMS with Self-Hosted and Cloud TinyMCE

Joe Robinson

May 9th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

Taking control of your app with a self-hosted installation sounds like a good plan for security and speed, right? It could be that your CMS app has TinyMCE included as a self-hosted dependency, and you want to add some of our premium plugins. Or, maybe you’re looking for extra control with a self-hosted deployment of TinyMCE and want to try out our premium plugins before committing to a paid plan.

Either way, a hybrid approach is exactly what you need to fit this use case within your CMS.

In a hybrid-hosting setup, Self-Hosted Tiny and Tiny Cloud work together. This article explains how that works for CMS developers, and getting started using a CMS app, with TinyMCE as your CMS WYSIWYG.

To help you hit the ground running, we’ve come up with a starter config specifically for CMSs, that contains all of the features your users will love.

CMS set up prerequisites

To leverage Cloud premium plugins, you’ll need an API key. You can either sign up for an API Key through our free Core plan or sign up for one of our premium plans (both come with a 14 day free trial of premium plugins).

Get your API key:

The CMS config:

Finding your FREE API key

Once logged in to your TinyMCE account, look at the top section as the page loads. The API key shown here gives you 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.

These instructions show how to make a demo that mimics the UI of a CMS and includes TinyMCE Cloud + Self-hosted premium plugins. You can adapt these instructions to add TinyMCE to your existing or new CMS. 

Check on the video tutorial for a summary of how to set up TInyMCE for your CMS:

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 using a hybrid self-hosted and cloud setup so tinymce is used in many cmss including joomla shopify and umbraco and what we've done is we've looked at how many of these cmss are using tiny mce and came up with a starter config specific for cms's it's a great starting point if you're building a cms from scratch updating the rich text editing capabilities within your existing cms or extending a third party cms to add rich text editing capabilities now there are a few reasons why you may want to use tinymce self-hosted on your app and loading premium plugins from the cloud you may already have tiny mce self-hosted in your app and rather than switching everything to the cloud you may just want to load the premium plugins for the cloud you may also already be self-hosting and maybe you just want to try out the cms starter config to see if it's right for you either way it's super easy to set up so what i've got here is kind of a fake sample app and we're going to look at how we can add the self-hosted cms config as well as the cloud premium plugins to it so we're going to start off by downloading the tinymce self-hosted zip file i'm going to go to tiny dot cloud slash get dash tiny and then i'm going to click on download tinymce sdk this is going to save a zip file to my computer i'm going to extract it and add it to my project directory so now you can see the tinymc files are right here we're going to include that tinymce.min.gs now while we're here i should also mention that you can get tiny mce self-hosted in a few other ways as well you can download it using your favorite package manager like npm yarn composer or nougat and we also have over 12 framework integrations so the tiny mce can easily be included using your favorite framework like react vue or angular for more information just check out that get tiny page that i'll post in the description so i'll pause right here and i'll just show a few files that i have open on my computer i've got my html for my app right here i've got my starter config and i've got some sample html that we're going to copy into the app later to test it out so now i'm going to copy the cms starter config into my app i should note that the starter config by default loads from the cloud so we need to make a few tweaks to make it load my local tinymce javascript file as well as the plugins from the cloud so we'll copy this over the first thing i'm going to do is change the script tag to load the local tinymce min.gs file so now that we've got that set up let's go into our app and see what it looks like okay so it looks like it's still not loading that's because right here we have this empty text area where we want to apply tiny mce but we haven't told tinymce to apply it to a text area yet so we're going to go back to the code and under selector we're just going to type in text area with tinymce you have to tell it where to apply the editor to i've chosen an html element text area so that means that it'll be applied to any text area on the page but you can also use css selectors like ids or classes as well so i'm going to hit save we'll reload the page here okay great looks like the editor is loading from the local javascript file however what you might notice is many of the premium plugins that we've included in the starter cms config are not being loaded that's because we still need to connect to the cloud with our api key to load the premium plugins so to do that you need to either sign up for a tiny mce free trial or sign up for one of the tiny mce premium plans you just go to our pricing page and you can choose the plan that you want every plan has a 14 day free trial so you can really test drive the cms starter config and see if it's right for you now of course if you don't want to sign up for a plan or you don't want to sign up for a trial you can always run the cms starter config you just need to disable the premium plugins okay so once i've signed up and i've logged into my tiny cloud account you'll see my api key there we're going to need that later so let's just leave this tab open now to include tinymce premium plugins from the cloud with your self-hosted tiny mce you need to load a javascript file from the cloud with your api key so we have a handy help article where you can copy the code snippet that you need to load tiny mce premium plugins from the cloud i'll paste the link to this article in the video description okay so remember that api key that we had we need to paste that into this code snippet so gonna go back to my account copy my api key and paste it right here awesome so now if we go back to our app it should load the premium plugins and there you go you're all set with the cms starter config self-hosted with premium plugins loaded from the cloud includes power paste which lets your users clean copy and paste from microsoft word google docs and other html sources and accessibility checker to make sure that your users are creating compliant accessible html so what's next it's time to start playing around with the starter config to make it yours add remove plugins as you see fit change around the toolbar and modify the other settings you'll see there's tips inside the starter config so you can learn more about how tinymce works and follow links to the relevant help articles now that your users can use tinymce within your app you're going to want to learn how to get and set content from tinymce to make sure that their content can get saved to your cms i'll include a link in the description to this helpful blog article that shows you exactly how to do that of course if you want to learn more the docs are a great place to learn about how all the plugins work and if you get stuck be sure to head on over to stackoverflow to post a question or if you're on a free trial or one of our premium plans you can reach out directly to our support team in future videos we'll explore this configuration a bit more and some best practices for rich text editing within cms's good luck.

To make a demo CMS, the following HTML and CSS code provides a setup for a CMS app.

  1. Set up a folder inside your workstation environment, and include an index.html file inside it.

  2. Copy the following CMS demo HTML into your index file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>CMS with TinyMCE</title>
  </head>
  <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">
            </article>

            <aside class="side">Sidebar</aside>
            <footer class="main-footer">The footer</footer>
        </div>
  </body>
</html>
  1. Create a style.css file

  2. Copy the following content into it 

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

The CSS style adds a grid area to the page, creating the look of a CMS User Interface.

Download and configure the TinyMCE Self-Hosting file

  1. Navigate to the TinyMCE get Tiny page, and click on the Download TinyMCE SDK Now button
  2. When the Download is finished, unzip the .zip file, and move it into the same directory as your demo CMS
  3. Reference TinyMCE with a script tag, specifying the source of the TinyMCE Self-Host folder you unzipped and added to your project:
<script src="tinymce/js/tinymce/tinymce.min.js"></script>

Configure the CDN link and API key 

  1. Add a script tag to your app inside the head tags

  2. Place a reference to the TinyMCE Content Delivery Network (CDN) within the script and add your API key:

<script src="https://cdn.tiny.cloud/1/api-key-goes-here/tinymce/6/plugins.min.js" referrerpolicy="origin"></script>  
  1. Save the changes

Note: If you’re not developing on localhost, you’ll need to whitelist your domain inside your Tiny.cloud account screen

Configure the Textarea

  1. Place the tinymce.init CMS demo into the script:

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

        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>
  1. Add the class or id to a textarea element in your app HTML

<textarea id="textarea" cols="30" rows="10">
      <p>Your CMS demo.</p>
</textarea>
  1. Save the changes, and load the demo in your browser:

Need more CMS information?

Head over to our CMS editor page to see another demo in action, and to find the CMS starter config used in this article. It’s available with and without comments in the HTML to explain what each aspect of TinyMCE is doing.

Remember that when signing up for a FREE API key, once you add the key to your app and start running Premium plugins, you have access to the functionality for 14 days before you need to consider using the Core plan without premium plugins, or signing up for one of the TinyMCE Paid plans.

And, while you’re in your 14-day free trial period (or after you’ve signed up for a paid plan), you can contact support if you have any questions on adding TinyMCE to your CMS.

Sign up today to get TinyMCE’s PowerPaste, Enhanced Image Editing, and Enhanced Media Embed 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

 

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