---
title: "Cloud deployment of editor & plugins"
description: "Learn how to set up the TinyMCE editor via the Cloud or migrate from a self-hosted environment."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-and-features/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-and-features/index.md"
version: "latest"
last_updated: "2026-09-28T00:27:52Z"
tokens: 1469
---
# 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](../editimage/) 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.

```html
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></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. |
| 3 | anonymous | the `crossorigin="anonymous"` attribute is required on all script tags loading TinyMCE from Tiny Cloud. This attribute ensures consistent Origin header behavior for license key validation and improves security for cross-origin script loading. |

![Script Tag Description](../_images/scripttag.png)

> **Important:** 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](../basic-example/) are available. Refer to the [Quick start](../cloud-quick-start/) section for more information.

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

> **Note:** 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](../basic-setup/) to include any additional purchased plugins and associated toolbar and menu items. For the enablement guide for each plugin, refer to [Premium plugins](../plugins/#premium-plugins).

> **Note:** 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 and firewall configuration

If the network has a firewall or forward proxy that controls access to the internet, ensure that the following URLs are accessible:

- All URLs where the editor is deployed.
- All URLs where the plugins are deployed.
- `*.tiny.cloud` — covers all Tiny Cloud services, including the image proxy, link checker, spell checker, AI API, and document converters.

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

For the full list of Tiny Cloud service domains and required headers, see [Firewall and proxy allowlisting](../tinymce-and-csp/#firewall-and-proxy-allowlisting).

### Step 5: Specifying a translation

To change the user interface language with a language pack, use the [language configuration option](../ui-localization/#language).

Alternatively, [Specify its location](../ui-localization/#language_url) 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.

> **Note:** 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, making sure to include both required attributes (`referrerpolicy` and `crossorigin`):

```html
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
```

> **Note:** When migrating to Tiny Cloud, both the `referrerpolicy="origin"` and `crossorigin="anonymous"` attributes are required for optimal performance and cross-browser functionality.

### Step 2: Update custom plugin paths

Reference [external_plugins](../editor-important-options/#external_plugins) to ensure custom plugins or modified plugins continue to function in the Tiny Cloud deployment.

> **Warning:** Do not use the regular [plugins](../work-with-plugins/) configuration element.

### Step 3: Specify purchased TinyMCE plugins and toolbar buttons

Extend the [TinyMCE configuration](../basic-setup/) to include any additional purchased plugins and associated toolbar and menu items. For the enablement guide for each plugin, refer to [Premium plugins](../plugins/#premium-plugins).

> **Note:** 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`
