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

How to get your Tiny Cloud API key setup in 5-minutes

Robert Collings

February 3rd, 2019

Written by

Robert Collings
Robert Collings

Category

Tips & How-Tos

The uptake of our Tiny Cloud service has been overwhelming. There are now more than 10,000 applications deployed to more than 1 million active users every month. Thanks to everyone joining us on this journey!

With thousands of developers joining us every week, we receive a lot of queries about setting up the API key. If that's you, five minutes is all it takes.

You'll need your API key and dev environment ready to go. If you haven't signed up for Tiny Cloud, it's easy.

A note about adding domains to your API key

Before we get to it, be aware that initially your API key is automatically configured for use in http and https localhost environments. If you’d like to add or edit domain information, we strongly suggest you do this before instantiating the editor for the first time.

It’s not a big deal if you do it afterwards, just expect a short delay to domain updates as your changes propagate across our global CDN.

If you'd like to add a domain to your API key now, it's a quick task:

Step 1

Login to your account and go to the API Key Manager.

TinyMCE Cloud API key

Step 2

Click Manage next to the key you want to update.

TinyMCE Cloud API key manage click event

Step 3

Add the domains you wish to assign to your API key. For example, if you want TinyMCE to load on store.example.com, that’s what you add to the Domain section. Click "Update API Key" when you're done.

TinyMCE Cloud API key manage domains

Regarding ports. Simply add whatever is in your browser address bar to the domain field. If you see something like store.example.com:8080 in your browser, you’d add 8080 to the port section. If there’s no :number don’t add anything.

There are no other domain setup requirements. Let’s get Tiny Cloud setup.

How to setup Tiny Cloud in 5-minutes

Step 1

Copy your API key from your registration email, or from your API Key Manager.

TinyMCE Cloud API key

Step 2

Add your API key to the tinymce script in the head of your page. Using this example from the Cloud setup documentation ...

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>

... you want to replace your_API_key with the key from the previous step.

Let’s say your API key is abc123xxxxxxxxxxxxYZ, you would add the key like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=abc123xxxxxxxxxxxxYZ"></script>
    <script>
      tinymce.init({
      selector: 'textarea',
      height: 500,
      plugins: 'lists advlist image imagetools'
      });
    </script>
  </head>
  <body>
    <form method="post">
      <textarea>
        <p><img src="https://tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /></p>
        <p>Hello, World!</p>
      </textarea>
    </form>
  </body>
</html>

btw, the above snippet is a working example that you can copy/paste. Just replace the placeholder API key.

Step 3

Assuming you added the API key correctly, and added domains (if required) to your Key Manager dashboard, you should now have TinyMCE running without the "nag message" in the editor.

If so, you’re all done. If not, please ask a question in the TinyMCE Community for more help.

The next step – which has nothing to do with your API key – is to add the plugins you need to your editor instance. You’ll find some examples herehere and here. Our plugin docs are also a great place to start.

Bonus, free Image Proxy service

We preconfigure every Tiny Cloud API key with our free Image Proxy service. This allows you to edit images inserted from servers other than your own. To activate the Image Proxy, specify the Image Tools plugin in your configuration object:

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  toolbar: "image",
  plugins: "image imagetools"
});

Integrating TinyMCE

As you know, instantiating TinyMCE (like in the example in Step 2 above) is a simple enough task. Integrating it into your project requires a little more work. To help you get started, we have several integration guides you might find useful:

Mattias Wikström from the TinyMCE core development team also wrote two great posts on integrating with React and Angular 2 respectively.

Thanks for moving to the Cloud with TinyMCE. If you’d like to build an even better content creation experience, check out our Premium Plugins. If you'd like to see more posts like this, let us know in the comments.

New framework wrappers

Following on from the success of Mattias' integration posts, we created wrappers for React, Angular and Vue. You find links on our Get Tiny page. These are definitely the easiest way to integrate TinyMCE with your React, Angular or Vue project. Check 'em out.

Get help at our weekly Office Hours

If you need help setting up Tiny Cloud, join our free Office Hours webinar where you can ask us anything. Every Tuesday at 10am PT / 1p ET. It’s free and registration is required#AskTiny

Tiny CloudTinyMCE
Robert Collings
byRobert Collings

Robert Collings is a Marketing Director at Tiny, responsible for our global event, field, channel and partner marketing programs. With a background in the music and publishing industries, in his spare time you'll find him listening to tunes, practicing Brazilian Jiu-Jitsu, and "doing dad stuff". Hit him up on LinkedIn if you'd like to chat marketing.

Related Articles

  • Abstract image of browser tab and content.
    Tips & How-Tos

    A quick guide to browser selection models

    by Team Tiny in Tips & How-Tos

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor