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

How to set up our 5 most popular premium plugins

Robert Collings

February 3rd, 2019

Written by

Robert Collings
Robert Collings

Category

Tips & How-Tos

Tagged

It wasn't long ago that if you wanted to extend TinyMCE with professional features you had to go "all-in" with an enterprise solution. That is no longer true. It's now possible to get solutions like our advanced copy/paste plugin PowerPaste, the new Media Embed and Advanced Code Editor plugins from as little as $20 per month.

In this post we'll help you get our 5 most popular plugins* setup in your tinymce instance. We will use the Tiny Cloud versions, so setup is super simple.

If you want to use an on-premise instance of the TinyMCE editor, this guide will help you setup a mixed (aka hybrid) deployment. Note that you will still use the Cloud version of the Premium Plugins.

* Although our file management solution MoxieManager is hugely popular, it is only available as an on-premise plugin. This article is focused on our cloud enabled solution.

Get started by adding your Tiny Cloud API key

With a thousand developers joining us every week, we receive many queries about setting up the Tiny Cloud API key. If you haven't done this yet, read our post to learn how to get your Tiny Cloud API key setup. You should be up and running in about five minutes.

If you are an experienced developer and have your API key available, here's what the script tag in your head will look like:

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

Remember, replace the text your_API_key with the key provided when you signed up for Tiny Cloud or purchased one of our Premium Plugins.

Pro Tip: don't forget to add the domains that will use tinymce to your API key in your key manager dashboard.

Let's start with the end in mind

Before we help you add individual plugins, if you are working with a new project and haven't yet setup TinyMCE, here's a sample code block that will instantiate a Cloud instance of the tinymce editor and the Premium Plugins:

<!DOCTYPE html> 
<html> 
<head> 
  <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
  <script>
     tinymce.init({ 
       selector: "textarea", 
       plugins: "powerpaste media mediaembed advcode a11ychecker tinymcespellchecker image imagetools", 
       toolbar: "advcode a11ycheck image" 
     }); 
  </script>
</head>
<body>
  <textarea>So long, and thanks for all the fish!</textarea>
</body>
</html>

Reminder: See the previous section about adding your Tiny Cloud API key to your init script.

Quick links

Activate TinyMCE PowerPaste

TinyMCE PowerPaste is the standard in clean copy/paste technology. If you paste content from Word, Excel or the internet (which is everyone), PowerPaste automatically cleans source content to deliver clean HTML without any extra work.

To activate TinyMCE PowerPaste in your tinymce instance:

  1. Add powerpaste to the plugin parameter.

Here's an example of what your init script might look like:

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

To learn more about plugin setup, see the TinyMCE documentation, which includes advanced config options.

Activate TinyMCE Enhanced Media Embed

TinyMCE Enhanced Media Embed makes it incredibly easy to add enriched media previews from the most popular web sources right inside TinyMCE. Facebook, YouTube, Flickr, NY Times, Vimeo, Hulu, Tumblr, CodePen, SlideShare, TechCrunch, WordPress, Twitch, Spotify ... and many more!

To activate TinyMCE Enhanced Media Embed in your tinymce instance:

  1. Add mediaembed and media to the plugin parameter.

Here's an example of what your init script might look like:

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "media mediaembed",
  mediaembed_max_width: 450
});

Note that this plugin does not have a toolbar button. To learn more about plugin setup see the TinyMCE documentation.

Activate TinyMCE Advanced Code Editor

The TinyMCE Advanced Code Editor brings an IDE-like interface to TinyMCE's code view, helping anyone who needs to edit raw HTML. Developers love the color syntax highlighting, bracket matching, code folding, and multiple selections/carets.

To activate TinyMCE Advanced Code Editor in your tinymce instance:

  1. Add advcode to the plugin parameter.
  2. To enable the toolbar button, add code to the toolbar parameter.

Here’s an example of what your init script might look like:

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

To learn more about plugin setup see the TinyMCE documentation, which includes advanced configuration options for this plugin.

Pro Tip: if you already use the Code (code) plugin, make sure you remove it from your init. It will break the Advanced Code plugin.

Activate TinyMCE Accessibility Checker

TinyMCE Accessibility Checker helps authors not familiar with HTML or web accessibility easily create compliant content. It does this using a step-through error checking interface familiar to almost every author. To activate TinyMCE Accessibility Checker in your tinymce instance:

  1. Add a11ychecker to the plugin parameter.
  2. To enable the toolbar button, add a11ycheck to the toolbar parameter.

Here's an example of what your init script might look like:

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

To learn more about plugin setup see the TinyMCE documentation. Note that name of the plugins and toolbar attributes are different for this plugin.

Activate TinyMCE Spell Checker Pro

TinyMCE Spell Checker Pro adds spell check as-you-type capabilities to TinyMCE. This includes inline spell checking and a dialog mode that steps a user through each error offering a list of suggested corrections.

To activate TinyMCE Spell Checker Pro in your tinymce instance:

  1. Add tinymcespellchecker to the plugin parameter.

Here's an example of what your init script might look like:

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "tinymcespellchecker",
  spellchecker_language: "en"
});

Although there's no other setup required for Tiny Cloud users, we do have documentation for the plugin (where you can see how much time you saved by not having to install a server-side component).

Bonus. Get a free Image Proxy!

We have a bonus for you. Tiny Cloud includes a free Image Proxy service. It enables an author to edit images inserted from servers other than yours, right within the TinyMCE editor. This means you don't need to setup your own proxy server, which is a massive time saver for everyone.

Here's an example of what your init script might look like:

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

Again, there's no other setup required for Tiny Cloud users (including anyone who purchases a Premium Plugin). We do have Image Tools documentation if you’re interested, or need to setup the SDK version.

Next steps

You've just taken the first, important step to building a better content creation experience. Thank you! Premium Plugin customers, you are entitled to support for purchased plugins. Go to https://support.ephox.com to learn more.

Not a customer yet, or want to learn more about our solutions? Schedule an appointment to speak to one of our product specialists. Learn more about pricing, or if you're ready to buy visit our online store.

One last thing: if you or someone you know uses WordPress, we have an enabler plugin that makes many of these plugins available in self-hosted WordPress.

More reading

TinyMCE
Robert Collings
byRobert Collings

Related Articles

  • Text "input, textarea, or" with a cursor positioned ready to type more.
    Tips & How-Tos

    Building better user interfaces for text entry

    by Marty Friedel in Tips & How-Tos
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

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