Data
/
tinymce-docs
mirror of https://github.com/tinymce/tinymce-docs.git
2
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

New and updated articles to reflect editor+feature Cloud deployment or feature-only Cloud deployment (links and formatting yet to be cleaned up)

pull/453/head
Jack Mason 9 years ago
parent
db11b4965b
commit
efbb5c1a76
8 changed files with 321 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      _data/nav.yml
  2. 61
      get-started-cloud/editor-and-features.md
  3. 160
      get-started-cloud/editor-plugin-version.md
  4. 59
      get-started-cloud/features-only.md
  5. 54
      get-started-cloud/index.md
  6. 27
      get-started-cloud/plugin-editor-version-compatibility.md
  7. 4
      plugins/imagetools.md
  8. 2
      plugins/spellchecker.md

5
_data/nav.yml
View File

@ -15,6 +15,11 @@
- url: "get-support" - url: "get-support"
- url: "get-started-cloud" - url: "get-started-cloud"
pages:
- url: "editor-and-features"
- url: "features-only"
- url: "editor-plugin-version"
- url: "plugin-editor-version-compatibility"
- url: "demo" - url: "demo"
pages: pages:

61
get-started-cloud/editor-and-features.md
View File

@ -0,0 +1,61 @@
---
layout: default
title: Editor and Features Deployed from Cloud
description_short: Learn how to setup the TinyMCE editor via our Cloud, or migrate from the SDK.
description: TinyMCE Cloud customers, you'll be up and running in less than 5 minutes.
keywords: tinymce cloud script textarea apiKey
---
TinyMCE Cloud is the easiest way to integrate TinyMCE and upgrade to our premium features.
You can start with [TinyMCE CDN]({{ site.baseurl }}/download/) completely free of charge.
In order to use the advanced features of the editor, you’ll need to signup for an API key and update the script tag used to load the editor code into your application.
## Integrating TinyMCE for the First Time
### Step 1: Embed Your Custom Script Tag into Your Webpage
In order to load TinyMCE for the very first time, you need to embed the TinyMCE editor code into your application. This is done by adding the following script tag into your app, or in the case of a web page the `<head>` of the page:
```js
<script src="http://cloud.tinymce.com/stable/tinymce.min.js?apiKey=your_API_key"></script>
```
### Step 2: Load, Customize and Interact with TinyMCE
In addition to the advanced content creation solutions available in the Cloud offering, you have access to more than 40 open source plugins to enhance the editing experience. We have provided a range of [simple examples]({{ site.baseurl }}/demo/basic-example/) and we encourage you to review our walkthrough documentation that will help you [get started with TinyMCE]({{ site.baseurl }}/get-started/first-steps/).
### Step 3: Specifying Purchased TinyMCE Plugins and Toolbar/Menu Items
Lastly, you just need to extend your TinyMCE configuration to include any of the additional, advanced plugins (and iassociated toolbar/menu items) you’ve purchased. You will find enablement guides here:
* [Powerpaste]({{ site.baseurl }}/plugins/powerpaste/)
* [Spell Checker]({{ site.baseurl }}/plugins/spellchecker/)
**Note:** `spellchecker_rpc_url` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/)
* [Image Tools (with configured image proxy)]({{ site.baseurl }}/plugins/image/)
**Note:** We will configure the `imagetools_cors_hosts` and `imagetools_proxy` properties for you automatically.
* [Accessibility Checker]({{ site.baseurl }}/plugins/a11ychecker/)
* [Advanced Code]({{ site.baseurl }}/https://www.tinymce.com/docs/plugins/advcode/)
## Migrating from TinyMCE SDK to TinyMCE Cloud
### Step 1: Replace Existing Reference to tinymce.min.js
Migrating from the SDK to the Cloud is a relatively straightforward process. Please remove your existing script tag that loads TinyMCE’s JavaScript (typically a reference to tinymce.min.js either hosted in your own application or available via our [CDN]({{ site.baseurl }}/download/)) and replace this script tag with the following:
```js
<script src="http://cloud.tinymce.com/stable/tinymce.min.js?apiKey=your_API_key"></script>
```
### Step 2: Specify Purchased TinyMCE Plugins and Toolbar Buttons
Now you just need to extend your [TinyMCE configuration]({ site.baseurl }}/configure/) to include any additional plugins (and associated toolbar/menu items) you’ve purchased. You will find enablement guides here:
* [Powerpaste]({{ site.baseurl }}/plugins/powerpaste/)
* [Spell Checker]({{ site.baseurl }}/plugins/spellchecker/)
**Note:** `spellchecker_rpc_url` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/)
* [Image Tools (with configured image proxy)]({{ site.baseurl }}/plugins/image/)
**Note:** We will configure the `imagetools_cors_hosts` and `imagetools_proxy` properties for you automatically.
* [Accessibility Checker]({{ site.baseurl }}/plugins/a11ychecker/)
* [Advanced Code]({{ site.baseurl }}/https://www.tinymce.com/docs/plugins/advcode/)

160
get-started-cloud/editor-plugin-version.md
View File

@ -0,0 +1,160 @@
---
layout: default
title: Specifying Editor and Plugin Versions
description_short: Specifying Editor and Plugin Versions for Cloud Deployments
description: Specifying Editor and Plugin Versions for Cloud Deployments
keywords: tinymce cloud script textarea apiKey
---
## Specifying the TinyMCE Editor Version Deployed from Cloud
When deploying the [TinyMCE editor via the Cloud]({{ site.baseurl }}/editor-and-features), you’re able to specify the editor version via the provided for URL.
Our documented default for loading TinyMCE via the Cloud is:
```js
<script src="http://cloud.tinymce.com/stable/tinymce.min.js?apiKey=your_API_key"></script>
```
The *“stable”* in this URL specifies the latest release of TinyMCE that has successfully completed the Ephox quality assurance testing process.
This value can be customised in order to load the version of TinyMCE that best suits your needs.
This value can be replaced with any of the following supported versions of TinyMCE: [http://cloud.tinymce.com/versions/tiny](http://cloud.tinymce.com/versions/tiny).
### Selecting Specific Version Numbers
You can specify a *Major* version number, a *Major.Minor* version number or a *Major.Minor.Patch* version number. If the Minor or Patch versions numbers are not present, it will default to the latest Minor/pPatch version released.
##### Example
Major version number (e.g. "4").
The following would load TinyMCE *4.latest.latest*:
```js
<script src="http://cloud.tinymce.com/4/tinymce.min.js?apiKey=your_API_key"></script>
```
##### Example
Major.Minor version number (e.g. "4.3").
The following would load TinyMCE *4.3.latest*:
```js
<script src="http://cloud.tinymce.com/4.3/tinymce.min.js?apiKey=your_API_key"></script>
```
##### Example
Major.Minor.Patch version number (e.g. "4.3.2").
The following would load TinyMCE *4.3.2*:
```js
<script src="http://cloud.tinymce.com/4.3.2/tinymce.min.js?apiKey=your_API_key"></script>
```
If you enter a version that doesn’t exist, you will get a HTTP 404 response.
### "dev" and "stable" Releases
Rather than specifying a specific TinyMCE version to load from the Cloud, you can choose to select from our automatically updated *"dev"* and *"stable"* release streams.
Updates to these streams will be automatic, providing you and your users with the latest TinyMCE version related to the criteria below as it’s released from Ephox.
#### "dev" Release Stream
This stream will deploy the absolute latest released TinyMCE version seen in the [TinyMCE changelog]({{ site.baseurl }}/changelog/).
##### Example
```js
<script src="http://cloud.tinymce.com/dev/tinymce.min.js?apiKey=your_API_key"></script>
```
#### "stable" Release Stream
This stream will deploy the latest release of TinyMCE that has undergone release from the Ephox quality assurance testing cycle.
##### Example
```js
<script src="http://cloud.tinymce.com/stable/tinymce.min.js?apiKey=your_API_key"></script>
```
## Specifying the Version of Features/Plugins Deployed from the Cloud
Whether you’re deploying both the [TinyMCE editor and premium plugins via the Cloud]({{ site.baseurl }}/editor-and-features) or deploying [only premium plugins from the Cloud]({{ site.baseurl }}/features-only), you can use URL query parameters to specify the version of each premium plugin.
#### Powerpaste
* [Developer documentation]({{ site.baseurl }}/plugins/powerpaste)
* [Supported versions](http://plugins.tinymce.com/versions/powerpaste)
##### Example
```js
<script src="http://cloud.tinymce.com/stable/plugins.min.js?apiKey=your_API_key&powerpaste=2.1.8"></script>
```
#### Spell Checking
* [Developer documentation]({{ site.baseurl }}/plugins/tinymcespellchecker)
* [Supported versions](http://plugins.tinymce.com/versions/tinymcespellchecker)
##### Example
```js
<script src="http://cloud.tinymce.com/stable/plugins.min.js?apiKey=your_API_key&tinymcespellchecker=0.9.6"></script>
```
#### Accessibility Checking
* [Developer documentation]({{ site.baseurl }}/plugins/a11ychecker)
* [Supported versions](http://plugins.tinymce.com/versions/a11ychecker)
##### Example
```js
<script src="http://cloud.tinymce.com/stable/plugins.min.js?apiKey=your_API_key&a11ychecker=1.0.2"></script>
```
#### Advanced Code
* [Developer documentation]({{ site.baseurl }}/plugins/advcode/)
* [Supported versions](http://plugins.tinymce.com/versions/advcode)
##### Example
```js
<script src="http://cloud.tinymce.com/stable/plugins.min.js?apiKey=your_API_key&advcode=1.0.2"></script>
```
## Example (Featuring Editor and Plugin Versions Specified)
The following example would load:
* TinyMCE 4.5.0
* Powerpaste version 2.1.8
* Advanced Code 1.0.2
```js
<html>
<head>
<script src="http://cloud.tinymce.com/4.5.0/tinymce.min.js?apiKey=your_API_key&powerpaste=2.1.8&advcode=1.0.2"></script>
</head>
<body>
<textarea><p>test textarea</p></textarea>
<script>
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'tinymcespellchecker']
});
</script>
</body>
<html>
```

59
get-started-cloud/features-only.md
View File

@ -0,0 +1,59 @@
---
layout: default
title: Features Deployed from Cloud
description_short: Learn how to setup TinyMCE features via our Cloud.
description: TinyMCE Cloud customers, you'll be up and running in less than 5 minutes.
keywords: tinymce cloud script textarea apiKey
---
If you’re already comfortable hosting and maintaining [TinyMCE Community edition]({{ site.baseurl }}/download/), or you’re running a web application where you have no control over the TinyMCE instance, you’re still able to load our premium TinyMCE plugins from TinyMCE Cloud.
In order to use the advanced features of the editor, you’ll need to select what features you’d like to purchase and you’ll be setup with an API key for your account.
## Step 1: Embed Your Custom Script Tag into Your Webpage
Within your webpage, after you’ve specified your script tag to load the TinyMCE editor code, you’ll need to then add the following new script:
```js
<script src="http://cloud.tinymce.com/stable/plugins.min.js?apiKey=your_API_key"></script>
```
## Step 2: Specify Purchased TinyMCE Plugins and Toolbar Buttons
Now you just need to extend your [TinyMCE configuration]({ site.baseurl }}/configure/) to include any additional plugins (and associated toolbar/menu items) you’ve purchased. You will find enablement guides here:
* [Powerpaste]({{ site.baseurl }}/plugins/powerpaste/)
* [Spell Checker]({{ site.baseurl }}/plugins/spellchecker/)
**Note:** `spellchecker_rpc_url` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/)
* [Image Tools (with configured image proxy)]({{ site.baseurl }}/plugins/image/)
**Note:** We will configure the `imagetools_cors_hosts` and `imagetools_proxy` properties for you automatically.
* [Accessibility Checker]({{ site.baseurl }}/plugins/a11ychecker/)
* [Advanced Code]({{ site.baseurl }}/https://www.tinymce.com/docs/plugins/advcode/)
Here is a complete example, whereby:
* The account `API key` has the value *TEST_API_KEY*.
* The account has the [Spell Checker]({{ site.baseurl }}/plugins/spellchecker/) plugin enable.
```js
<html>
<head>
<script src="http://your_server/tinymce.min.js"></script>
<script src="http://cloud.tinymce.com/stable/plugins.min.js?apiKey=your_API_key"></script>
</head>
<body>
<textarea><p>test textarea</p></textarea>
<script>
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'tinymcespellchecker']
});
</script>
</body>
<html>
```

54
get-started-cloud/index.md
View File

@ -1,57 +1,9 @@
--- ---
layout: default layout: default
title: Cloud Get Started title: Cloud Get Started
description_short: Learn how to setup TinyMCE Cloud, or migrate from the SDK.
description_short: Learn how to setup the TinyMCE editor and plugins via our Cloud.
description: TinyMCE Cloud customers, you'll be up and running in less than 5 minutes. description: TinyMCE Cloud customers, you'll be up and running in less than 5 minutes.
keywords: tinymce cloud script textarea apiKey keywords: tinymce cloud script textarea apiKey
--- ---
In this brief walk-through, we’ll show you how simple it is to setup and deploy TinyMCE via our new Cloud offering. The process is mostly the same as an integration using our SDK, with a few minor changes.
The most important change is that you’ll need an API key to access the pre-configured, managed, server-side services. The key is provided when you subscribe to [TinyMCE Cloud](http://go.tinymce.com/cloud/).
## Integrating TinyMCE for the first time
### Step 1: Embed your custom script tag into your web page
Just as with the SDK, you need to embed TinyMCE in your application. This is done by adding the following script tag into your app, or in the case of a web page the `<head>` of the page:
```html
<script src="http://cloud.tinymce.com/4/tinymce.min.js?apiKey=<your_key>"></script>
```
### Step 2: Load, customize and interact with TinyMCE
In addition to the advanced content creation solutions available in the Cloud offering, you have access to more than 40 open source plugins to enhance your user’s editing experience. We have provided a range of simple examples on [tinymce.com]({{ site.baseurl }}/demo/basic-example/) and we encourage you to review our walkthrough documentation that will help you [get started with TinyMCE]({{ site.baseurl }}/get-started/first-steps/).
### Step 3: Specify your purchased TinyMCE plugins and toolbar/menu Items
Lastly, you just need to extend your TinyMCE configuration to include any of the additional, advanced content services (and associated toolbar/menu items) you’ve purchased. You will find enablement guides here:
* [Advanced copy/paste with the PowerPaste plugin]({{ site.baseurl }}/enterprise/paste-from-word/)
* [Spellcheck-as-you-type via Spell Check Pro]({{ site.baseurl }}/enterprise/check-spelling/plugin/)
* [Image Tools (with configured image proxy)]({{ site.baseurl }}/plugins/image/) **Note: We will configure the `imagetools_cors_hosts` and `imagetools_proxy` properties for you automatically.**
* [Accessibility-as-you-type]({{ site.baseurl }}/plugins/a11ychecker/)
* [Advanced Code View] ({{ site.baseurl }}/plugins/advcode/)
## Migrating from TinyMCE SDK to TinyMCE Cloud
### Step 1: Replace existing reference to tinymce.min.js
Migrating from the SDK to the Cloud is a relatively straightforward process. Please remove your existing script tag that loads TinyMCE’s JavaScript (typically a reference to `tinymce.min.js`) and replace this script tag with the following:
```html
<script src="http://cloud.tinymce.com/4/tinymce.min.js?apiKey=<your_key>"></script>
```
### Step 2: Specify purchased TinyMCE plugins and toolbar buttons
Now you just need to extend your TinyMCE [configuration]({{ site.baseurl }}/configure/) to include any additional plugins (and associated toolbar/menu items) you’ve purchased. You will find enablement guides here:
* [Advanced copy/paste with the PowerPaste plugin]({{ site.baseurl }}/enterprise/paste-from-word/)
* [Spellcheck-as-you-type via Spell Check Pro]({{ site.baseurl }}/enterprise/check-spelling/plugin/)
* [Image Tools (with configured image proxy)]({{ site.baseurl }}/plugins/image/) **Note: We will configure the `imagetools_cors_hosts` and `imagetools_proxy` properties for you automatically.**
* [Accessibility-as-you-type]({{ site.baseurl }}/plugins/a11ychecker/)
* [Advanced Code View] ({{ site.baseurl }}/plugins/advcode/)
That’s all there is to it. If you have any questions about [TinyMCE Cloud](http://go.tinymce.com/cloud) please contact our sales team via our [feature comparison and pricing page](https://www.tinymce.com/pricing/). If you are already a Cloud customer and have any queries, please contact your support representative.
{% assign links = site.data.nav[1].pages %}
{% include index.html links=links %}

27
get-started-cloud/plugin-editor-version-compatibility.md
View File

@ -0,0 +1,27 @@
---
layout: default
title: Plugin and Editor Version Compatibility
description_short: Matrix of compatibility between TinyMCE editor versions and premium plugins.
description: Premium plugins compatibility with TinyMCE editor versions.
keywords: tinymce cloud script textarea apiKey
---
Some of our premium plugins are only compatible with certain versions versions of TinyMCE.
If you’re deploying [both the TinyMCE editor and premium plugins via the Cloud]({{ site.baseurl }}/editor-and-features), use the following matrix in conjunction with the optional parameters for specifying editor version and plugin version ({{ site.baseurl }}/editor-plugin-version) to ensure your editor and features are compatible.
If you’re deploying [premium plugins *only* via the Cloud]({{ site.baseurl }}/features-only), you’ll need to ensure you’re either only loading plugins supported for your editor version, or that your editor is upgraded to the required release.
| | PowerPaste | Spell Checker Pro | Accessibility Checker | Mentions | Advanced Code | MoxieManager<br/>(SDK ONLY) | Link Checker | Media Embed |
| ------ | :------: | :------: | :------: | ------ | :------: | :------: | :------: | :------: |
| 4.5 | Y | Y | Y | Y | Y | Y | Y | Y |
| 4.4.3 | Y | Y | Y | Y | Y | Y | N | N |
| 4.3.13 | Y | Y | Y | Y | Y | Y | N | N |
| 4.2.8 | Y | N2 | N | N | N | Y | N | N |
| 4.1.10 | Y | N | N | N | N | Y | N | N |
| 4.0.28 | Y | N | N | N | N | Y | N | N |
| 3.5.8 | N | N | N | N | N | Y | N | N |
| | | | | | | | | |

4
plugins/imagetools.md
View File

@ -28,6 +28,8 @@ Image Tools cannot work with images from another domains due to security measure
Array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via `imagetools_cors_hosts` option. Array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via `imagetools_cors_hosts` option.
**Note:** `imagetools_cors_hosts` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/).
**Type:** `String` **Type:** `String`
##### Example ##### Example
@ -47,6 +49,8 @@ Another way of getting images across domains is using local server-side proxy. P
[TinyMCE Enterprise](http://www.tinymce.com/pricing/) subscription also includes proxy service written in Java. Check [Install Server-side Components]({{ site.baseurl }}/enterprise/server/) guide for details. [TinyMCE Enterprise](http://www.tinymce.com/pricing/) subscription also includes proxy service written in Java. Check [Install Server-side Components]({{ site.baseurl }}/enterprise/server/) guide for details.
**Note:** `imagetools_proxy` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/)
**Type:** `String` **Type:** `String`
##### Example ##### Example

2
plugins/spellchecker.md
View File

@ -123,6 +123,8 @@ tinymce.init({
This options enables you to specify a custom URL to be used for the spellchecker. This can be the `spellchecker` URL provided by the TinyMCE `spellchecker` packages or a URL to a page that you have in your system. The URL is **relative** to the `spellchecker` plugin. This options enables you to specify a custom URL to be used for the spellchecker. This can be the `spellchecker` URL provided by the TinyMCE `spellchecker` packages or a URL to a page that you have in your system. The URL is **relative** to the `spellchecker` plugin.
**Note:** `spellchecker_rpc_url` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/)
**Type:** `String` **Type:** `String`
##### Example ##### Example

Write Preview
Loading…
Cancel
Save