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

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
    tinymce.init({
      selector: 'textarea',
    });
  </script>
</head>
<body>
  <h1>TinyMCE CMS Starter Config</h1>
  <form method="post">
    <textarea>
      <h1>Heading Level 1</h1>
    </textarea>
  </form>
</body>
</html>

<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 pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck code',

      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,

    });
</script>

<script src="tinymce/js/tinymce/tinymce.min.js"></script>

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

<textarea>
      <h1>Heading Level 1</h1>
      <p><strong><img style="float: right;" src="https://images.pexels.com/photos/1559825/pexels-photo-1559825.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" alt="Town" width="300" height="375">Pellentesque habitant morbi tristique </strong>senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em></p>
      <p>Mauris placerat eleifend leo.</p>
      <p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.</p>
      <p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
      <p>Donec pharetra purus eu eros dignissim dignissim. Donec consectetur, felis eu malesuada ultricies, felis ligula auctor diam, nec rhoncus massa leo vel massa.</p>
      <table style="border-collapse: collapse; width: 100%;" border="1">
        <thead>
          <tr>
            <td style="width: 31.7887%;"> </td>
            <td style="width: 31.7887%;"><strong>Location</strong></td>
            <td style="width: 31.7896%;"><strong>Activity</strong></td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="width: 31.7887%;"><strong>Day 1</strong></td>
            <td style="width: 31.7887%;">Dolor</td>
            <td style="width: 31.7896%;">Tellus est malesuada </td>
          </tr>
          <tr>
            <td style="width: 31.7887%;"><strong>Day 2</strong></td>
            <td style="width: 31.7887%;">Eleifend</td>
            <td style="width: 31.7896%;">Vivamus pretium ornare est</td>
          </tr>
          <tr>
            <td style="width: 31.7887%;"><strong>Day 3</strong></td>
            <td style="width: 31.7887%;">Semper</td>
            <td style="width: 31.7896%;">Amet, consectetuer adipiscing</td>
          </tr>
        </tbody>
      </table>
      <h2>Heading Level 2</h2>
      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>
      <h3>Heading Level 3</h3>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ul>
</textarea>

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