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.

Create a demo CMS

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. 

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