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

How to use TinyMCE premium plugins in WordPress 5

Ben Long

September 28th, 2019

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

Combine what you love about WordPress 5 with the power and flexibility that comes with TinyMCE 5.

TinyMCE 5 delivers an exceptional, rich text editor experience. And with 50+ powerful plugins available to developers, extending TinyMCE is as simple as including a single line of code.

TinyMCE’s functionality is already provided in WordPress 5 in the Gutenberg Classic Block. Or, if you don’t want to use the Gutenberg block editor, you can read the previous post on how to switch back to the full classic editor. You can also add more advanced TinyMCE functionality to either of those scenarios with the TinyMCE Advanced WordPress plugin.

Regardless of your approach to TinyMCE editing, you can take full advantage of TinyMCE’s premium plugins – such as PowerPasteAdvanced Code EditorSpell Checker Pro, and Accessibility Checker – with the Advanced TinyMCE Configuration WordPress plugin.

Get started with our premium plugins in three simple steps.

1. Configure the domains on your API Key

Configure your API Key to allow requests from your WordPress domain. If you don’t yet have a Tiny API Key, you can get started with one now.

  1. Log in to your Tiny account.
  2. Click API Key Manager.
  3. Indicate that you want to accept requests from your WordPress domain. For example, if your WordPress site is accessed from mysite.com.au, add that domain, then click UPDATE API KEY.

    API Key Manager settings where you specify the domains that can use the API Key.

2. Install the Advanced TinyMCE Configuration WordPress plugin

The Advanced TinyMCE Configuration WordPress plugin, developed by Andrew Ozz, provides an interface for making more complex configuration changes to the TinyMCE editor, including the ability to activate TinyMCE premium plugins.

NOTE: Although this plugin is powered by Tiny, we are not responsible for providing technical support for it. Reach out to the plugin developer if required.

  1. Log in to your WordPress Dashboard, click Plugins, then Add New.

    WordPress Plugins screen with the Add New button highlighted.
  2. Search for the Advanced TinyMCE Configuration plugin, then click Install Now.

    WordPress Add Plugins screen with the Install Now button highlighted against the Advanced TinyMCE Configuration plugin.
  3. Once the plugin is installed, click Activate.

    WordPress Add Plugins screen with the Activate button highlighted against the Advanced TinyMCE Configuration plugin.

3. Configure TinyMCE to use your premium plugins

Once you have installed and activated the Advanced TinyMCE Configuration WordPress plugin, you can go ahead and configure your TinyMCE premium plugins.

  1. From within your WordPress Dashboard, click Settings, then select TinyMCE Config.
  2. Scroll down to the Defaults section, and click Show the default TinyMCE settings.

    TinyMCE Config settings with Show the default TinyMCE settings button highlighted.

  3. If the external_plugins setting already exists, click Change next to the setting, otherwise scroll down and add it as a new option.

    For example, for PowerPaste, add the following code (replacing APIKEY with your own API Key).

    {"powerpaste":"https:\/\/cdn.tiny.cloud\/1\/APIKEY\/tinymce\/5-stable\/plugins\/powerpaste\/plugin.min.js"}

    TinyMCE Config settings showing Add new option, where name is external_plugins, and value is the example code provided.

    And remember to Save Changes.

    Separate multiple values with commas if applicable. For example:

    {"a11ychecker":"https:\/\/cdn.tiny.cloud\/1\/APIKEY\/tinymce\/5-stable\/plugins\/a11ychecker\/plugin.min.js", "powerpaste":"https:\/\/cdn.tiny.cloud\/1\/APIKEY\/tinymce\/5-stable\/plugins\/powerpaste\/plugin.min.js"}
    Refer to the documentation for more guidance on plugin names and product versions.

  4. Add or modify the plugins setting, adding the name of the plugin (in this case, powerpaste) to the list of values.

    TinyMCE Config settings showing option, where name is plugins and value has powerpaste appended (comma separated).

  5. Then add any other settings specific to the plugin. Refer to the documentation for more information about plugins and their settings.

    TinyMCE Config settings with three options (name-value pairs) specific to PowerPaste.

And you’re done! 

Now, when adding or editing your WordPress content, you can go ahead and use the premium plugins you’ve configured.

What next?

Find out how you can complement your solution by managing files and images in the cloud with Tiny Drive.

WordPressIntegration
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Tiny logo and Vue logo combined with a plus symbol.
    Tips & How-Tos

    How to add TinyMCE 5 to a simple Vue project

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