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

How to set up TinyMCE from the cloud

Joe Robinson

April 28th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

To start using TinyMCE, the easiest and fastest way is to access it through the cloud. TinyMCE is trusted by over 1.5 million developers worldwide, and can be quickly configured.

This article explains how to get started using TinyMCE from the cloud. It covers the prerequisites, and essential steps to go from a blank project to getting TinyMCE up and running.

If you’re self-hosting TinyMCE and want to use premium features, check out how to self-host TinyMCE and load premium features from the cloud.


Looking for more TinyMCE information?

What you need to get started

Take these steps:

  1. Navigate to tiny.cloud
  2. Click on Pricing to view the different pricing plans
  3. Choose a Premium plan, or go with our Core (free forever) plan. All plans come with a 14-day FREE trial of premium features. 

(The 14-day trial contains all the plugins used in the majority of TinyMCE configurations.) 

The next step is to login and retrieve the scripts needed to add TinyMCE to your project.

Without an API key, you can’t register your project URL. If your project URL is unregistered, then you’ll receive warning messages concerning the domain registration:

This domain is not registered with Tiny Cloud.  Please see the quick start guide or create an account

By adding your project URL within your TinyMCE account and using an API key, it removes these warnings.

Getting TinyMCE cloud up and running

Before you log into your account, you’ll need to verify your email address. Once you’re logged in, on your dashboard, you’ll see your TinyMCE API key, and sample HTML for adding TinyMCE into an application.

TinyMCE Dashboard with API key

  1. Navigate to the TinyMCE log in page, and enter your credentials.

  2. At this stage, If you have an application address, register it by clicking on the Approved Domains heading.

    1. Paste in your application address under the  Domain Name heading

  3. Return to your Dashboard, and scroll down to the TinyMCE Installation heading. Copy the HTML starter code.

  4. Paste this content into a new index.html file, or directly into your project HTML. You may need to remove the <!DOCTYPE html> tags, or other markup, if you already have a project index.html file ready

  5. Adjust the selector value as needed. By default, it is set as an id. You can change it to any sort of CSS selector, such as a  class or an id. TinyMCE will transform the element that it is applied to in the document. The following example uses an ID: 

<script>
      tinymce.init({
      selector: '#mytextarea', //Configured for an id, however change it to <selector: 'textarea'> to target textarea tags
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak',
      toolbar_mode: 'floating',
    });
</script>

<body>
   <textarea id=”mytextarea”>
    Welcome to TinyMCE!
  </textarea>
</body>
  1. Save your project HTML 

  2. Load your project in your browser

TinyMCE running in a browser

What to do next

You can start adjusting and playing with the configuration in your app as needed. TinyMCE has a broad array of Premium Plugins available to try. Since accessing premium features beyond the 14-day free trial requires a paid subscription, check the pricing plans page. 

If you have any questions on our Premium Plugins, reach out to our support team during your trial. You can also post on Stack Overflow with the TinyMCE tag to answer a question from the TinyMCE community. Remember, all plans come with 14 days of FREE Premium Plugin capabilities, so you can test and try out different plugins, and decide what works best for your app.

TinyMCETiny CloudConfigurationWYSIWYG
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 migrate from Slate.js to TinyMCE

    by Ben Long 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