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:
- Check on the pricing plans for TinyMCE, and select your desired plan.
- Or navigate directly to the sign up page to get your FREE 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, If you're accessing the editor through Tiny Cloud, you'll need an API key to prevent the editor changing to read-only mode. Without your API key, you also 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 accountWhen 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.
CMS configuration video
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:
- Log into your account, and scroll down to the TinyMCE Installation heading. Copy the API key for your demo CMS.
- Create an
index.htmlfile - Paste the following 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
- Navigate to the CMS page and copy the CMS editor config.
- Paste the CMS editor config (minus the surrounding HTML elements) in place of the
<script>tags containing the default tinymce.init 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 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>Add CMS editor styling
-
Copy the following content_style CSS, and paste it into the TinyMCE init script:
content_style: `
img {
height: auto;
margin: auto;
padding: 10px;
display: block;
}
img.medium {
max-width: 25%;
}
`;
-
Update the HTML content to match the TinyMCE CMS demo content:
<textarea>
<h1>Heading Level 1</h1>
<p><strong><img style="float: right;" src="<a href="https://images.pexels.com/photos/1559825/pexels-photo-1559825.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">https://images.pexels.com/photos/1559825/pexels-photo-1559825.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260</a>" 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>-
Save the changes, and load the app in a browser:
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 >>> |
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.
