---
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/7/editor-and-features/index.md"
version: "7"
last_updated: "2024-12-11T05:09:59Z"
tokens: 1940
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/editor-and-features/).
# 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 `` of the page:
The following example adds a script tag into the application that inserts the code. Use the `` of the page on a web page. Be sure to substitute 'no-api-key' with your api key.
```html
```
| | 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. |
> **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. Refer to the following enablement guides for more information:
- [Accessibility Checker](../a11ychecker/)
- [Enhanced Tables](../advtable/)
- [Advanced Typography](../advanced-typography/)
- [Case Change](../casechange/)
- [Checklist](../checklist/)
- [Comments](../introduction-to-tiny-comments/)
- [Enhanced Code Editor](../advcode/)
- [Enhanced Media Embed](../introduction-to-mediaembed/)
- [Export to PDF](../exportpdf/)
- [Export to Word](../exportword/)
- [Footnotes](../footnotes/)
- [Format Painter](../formatpainter/)
- [Import from Word](../importword/)
- [Inline CSS](../inline-css/)
- [Image Editing](../editimage/)
- [Image Optimizer Powered by Uploadcare](../uploadcare/)
- [Link Checker](../linkchecker/)
- [Math](../math/)
- [Markdown](../markdown/)
- [Mentions](../mentions/)
- [Merge Tags](../mergetags/)
- [MoxieManager](../moxiemanager/)
- [Page Embed](../pageembed/)
- [Permanent Pen](../permanentpen/)
- [PowerPaste](../introduction-to-powerpaste/)
- [Spell Checker](../introduction-to-tiny-spellchecker/)
- [Spelling Autocorrect](../autocorrect/)
- [Table of Contents](../tableofcontents/)
- [Tiny Drive](../tinydrive-introduction/)
> **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 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](../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:
```html
```
### 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. Refer to the following enablement guides for more information:
- [Accessibility Checker](../a11ychecker/)
- [Enhanced Tables](../advtable/)
- [Advanced Typography](../advanced-typography/)
- [Case Change](../casechange/)
- [Checklist](../checklist/)
- [Comments](../introduction-to-tiny-comments/)
- [Enhanced Code Editor](../advcode/)
- [Enhanced Media Embed](../introduction-to-mediaembed/)
- [Export to PDF](../exportpdf/)
- [Export to Word](../exportword/)
- [Footnotes](../footnotes/)
- [Format Painter](../formatpainter/)
- [Import from Word](../importword/)
- [Inline CSS](../inline-css/)
- [Image Editing](../editimage/)
- [Image Optimizer Powered by Uploadcare](../uploadcare/)
- [Link Checker](../linkchecker/)
- [Math](../math/)
- [Markdown](../markdown/)
- [Mentions](../mentions/)
- [Merge Tags](../mergetags/)
- [MoxieManager](../moxiemanager/)
- [Page Embed](../pageembed/)
- [Permanent Pen](../permanentpen/)
- [PowerPaste](../introduction-to-powerpaste/)
- [Spell Checker](../introduction-to-tiny-spellchecker/)
- [Spelling Autocorrect](../autocorrect/)
- [Table of Contents](../tableofcontents/)
- [Tiny Drive](../tinydrive-introduction/)
> **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`