Cloud deployment of editor & plugins

Tiny Cloud is the easiest way to integrate TinyMCE and upgrade to premium plugins.

Tiny Cloud can be used without an API key. Sign up for an API key and update the script tag to use premium plugins or avoid the in-editor developer warning.

All Tiny Cloud accounts include a free, pre-configured Tiny Cloud image proxy service. This setup uses the Image Editing plugin.

Integrating TinyMCE for the first time

Step 1: Insert the Tiny Cloud script tag into the webpage

Insert the TinyMCE editor code into the application to load TinyMCE for the first time. The code inserting is done by adding the following script tag into your app, or in the case of a web page the <head> of the page:

The following example adds a script tag into the application that inserts the code. Use the <head> of the page on a web page. Be sure to substitute 'no-api-key' with your api key.

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
Value Description

1

no-api-key

Replace with your api key

2

origin

A referrerpolicy specifies how much of the current page’s URL is sent in the Referer header when the browser fetches page resources (for example, the TinyMCE editor). The use of the Referer header ensures API keys are only used on domains registered to their owners. We only care about the domain portion however (similar to the operation of Origin header), so for improved performance and privacy always set the referrerpolicy to origin when requesting Tiny Cloud resources.
Script Tag Description

Tiny Cloud verifies the domain TinyMCE is loading from by checking the Referer header in the network request. Sometimes the domains in the Referer header does not match with the URL in the browser’s address bar.

To check the Referer header, open your browser’s Developer’s Tools and open the Network tab. From there, find the request being made to load TinyMCE with your API key, and click on the Headers tab. In the section called Request Headers there should be a field for Referer. If the value there is different from one of your registered URLs, you may need to adjust either your registered URLs, or your application’s Refer header settings.

Step 2: Load, customize and interact with TinyMCE

There are more than 40 open source plugins that enhance the editing experience in addition to the advanced content create solutions on Tiny Cloud. A range of simple examples are available. Refer to the Quick start section for more information.

Step 3: Specifying purchased TinyMCE plugins and toolbar/menu items

It may take up to 30 minutes for the purchased plugin to be available to TinyMCE. Clear the browser’s cache.

Extend the TinyMCE configuration to include any additional purchased plugins and associated toolbar and menu items. Refer to the following enablement guides for more information:

Configuration of the following options occurs automatically when using the Tiny Cloud:

  • editimage_cors_hosts

  • editimage_proxy_service_url

  • export_image_cors_hosts

  • export_image_proxy_service_url

  • linkchecker_service_url

  • mediaembed_service_url

  • spellchecker_rpc_url

  • autocorrect_service_url

Step 4: Forward proxy configuration

Ensure that the following URLs are accessible via this proxy if the network has a forward proxy that controls access to the internet.

  • All URLs where the editor is deployed.

  • All URLs where the plugins are deployed.

  • https://imageproxy.tiny.cloud

  • https://hyperlinking.tiny.cloud

  • https://spelling.tiny.cloud

Ensure the tiny-api-key and tinymce-api-key headers are retained while requesting the list of above URLs.

Step 5: Specifying a translation

To change the user interface language with a language pack, use the language configuration option.

Alternatively, Specify its location with the language_url configuration option.

Migrating from a self-hosted environment to Tiny Cloud

Step 1: Replace existing reference to tinymce.min.js

Migrating from a self-hosted environment to Tiny Cloud is easy. Remove the existing script tag that loads TinyMCE’s JavaScript.

The script tag typically references tinymce.min.js hosted within the application or available at a legacy CDN.

Replace the script tag with the following:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>

Step 2: Update custom plugin paths

Reference external_plugins to ensure custom plugins or modified plugins continue to function in the Tiny Cloud deployment.

Do not use the regular plugins configuration element.

Step 3: Specify purchased TinyMCE plugins and toolbar buttons

Extend the TinyMCE configuration to include any additional purchased plugins and associated toolbar and menu items. Refer to the following enablement guides for more information:

Configuration of the following options occurs automatically when using the Tiny Cloud:

  • editimage_cors_hosts

  • editimage_proxy_service_url

  • export_image_cors_hosts

  • export_image_proxy_service_url

  • linkchecker_service_url

  • mediaembed_service_url

  • spellchecker_rpc_url

  • autocorrect_service_url