Skip to content

editor-and-features.adoc

Latest commit

 

History

History
104 lines (64 loc) · 6.09 KB

editor-and-features.adoc

File metadata and controls

104 lines (64 loc) · 6.09 KB

Cloud deployment of editor & plugins

{cloudname} is the easiest way to integrate {productname} and upgrade to premium plugins.

{cloudname} 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 {cloudname} accounts include a free, pre-configured {cloudname} image proxy service. This setup uses the Image Editing plugin.

Integrating {productname} for the first time

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

Insert the {productname} editor code into the application to load {productname} 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="{cdnurl}" 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 {productname} 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 {cloudname} resources.

3

anonymous

the crossorigin="anonymous" attribute is required on all script tags loading {productname} from {cloudname}. This attribute ensures consistent Origin header behavior for license key validation and improves security for cross-origin script loading.
Script Tag Description
Important

{cloudname} verifies the domain {productname} 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 {productname} 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 {productname}

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

Step 3: Specifying purchased {productname} plugins and toolbar/menu items

Note
 It may take up to 30 minutes for the purchased plugin to be available to {productname}. Clear the browser’s cache.

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

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.

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 {cloudname} is easy. Remove the existing script tag that loads {productname}’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):

<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
Note
 When migrating to {cloudname}, 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 to ensure custom plugins or modified plugins continue to function in the {cloudname} deployment.

Warning
 Do not use the regular plugins configuration element.

Step 3: Specify purchased {productname} plugins and toolbar buttons

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