From efbb5c1a76d47347700da1bd98f56beb8bf97cb1 Mon Sep 17 00:00:00 2001 From: Jack Mason Date: Tue, 6 Dec 2016 21:16:11 +1000 Subject: [PATCH] New and updated articles to reflect editor+feature Cloud deployment or feature-only Cloud deployment (links and formatting yet to be cleaned up) --- _data/nav.yml | 5 + get-started-cloud/editor-and-features.md | 61 +++++++ get-started-cloud/editor-plugin-version.md | 160 ++++++++++++++++++ get-started-cloud/features-only.md | 59 +++++++ get-started-cloud/index.md | 54 +----- .../plugin-editor-version-compatibility.md | 27 +++ plugins/imagetools.md | 4 + plugins/spellchecker.md | 2 + 8 files changed, 321 insertions(+), 51 deletions(-) create mode 100644 get-started-cloud/editor-and-features.md create mode 100644 get-started-cloud/editor-plugin-version.md create mode 100644 get-started-cloud/features-only.md create mode 100644 get-started-cloud/plugin-editor-version-compatibility.md diff --git a/_data/nav.yml b/_data/nav.yml index 8c6c94b7f..06783fe50 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -15,6 +15,11 @@ - url: "get-support" - url: "get-started-cloud" + pages: + - url: "editor-and-features" + - url: "features-only" + - url: "editor-plugin-version" + - url: "plugin-editor-version-compatibility" - url: "demo" pages: diff --git a/get-started-cloud/editor-and-features.md b/get-started-cloud/editor-and-features.md new file mode 100644 index 000000000..af16c61d4 --- /dev/null +++ b/get-started-cloud/editor-and-features.md @@ -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 `` of the page: + +```js + +``` + +### 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 + +``` + +### 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/) diff --git a/get-started-cloud/editor-plugin-version.md b/get-started-cloud/editor-plugin-version.md new file mode 100644 index 000000000..31325dc86 --- /dev/null +++ b/get-started-cloud/editor-plugin-version.md @@ -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 + +``` + +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 + +``` + +##### Example +Major.Minor version number (e.g. "4.3"). + +The following would load TinyMCE *4.3.latest*: + +```js + +``` + +##### Example +Major.Minor.Patch version number (e.g. "4.3.2"). + +The following would load TinyMCE *4.3.2*: + +```js + +``` + +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 + +``` + +#### "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 + +``` + +## 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 + +``` + +#### Spell Checking + +* [Developer documentation]({{ site.baseurl }}/plugins/tinymcespellchecker) +* [Supported versions](http://plugins.tinymce.com/versions/tinymcespellchecker) + +##### Example + +```js + +``` + +#### Accessibility Checking + +* [Developer documentation]({{ site.baseurl }}/plugins/a11ychecker) +* [Supported versions](http://plugins.tinymce.com/versions/a11ychecker) + +##### Example + +```js + +``` + +#### Advanced Code + +* [Developer documentation]({{ site.baseurl }}/plugins/advcode/) +* [Supported versions](http://plugins.tinymce.com/versions/advcode) + +##### Example + +```js + +``` + +## 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 + + + + + + + + + + +``` diff --git a/get-started-cloud/features-only.md b/get-started-cloud/features-only.md new file mode 100644 index 000000000..4fef3f555 --- /dev/null +++ b/get-started-cloud/features-only.md @@ -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 + +``` + +## 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 + + + + + + + + + + +``` + diff --git a/get-started-cloud/index.md b/get-started-cloud/index.md index c5448c6aa..de5d3edad 100644 --- a/get-started-cloud/index.md +++ b/get-started-cloud/index.md @@ -1,57 +1,9 @@ --- layout: default 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. 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 `` of the page: - -```html - -``` - -### 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 - -``` - -### 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 %} diff --git a/get-started-cloud/plugin-editor-version-compatibility.md b/get-started-cloud/plugin-editor-version-compatibility.md new file mode 100644 index 000000000..540e06942 --- /dev/null +++ b/get-started-cloud/plugin-editor-version-compatibility.md @@ -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
(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 | +| | | | | | | | | | + + + diff --git a/plugins/imagetools.md b/plugins/imagetools.md index a500695cd..91ee853f9 100644 --- a/plugins/imagetools.md +++ b/plugins/imagetools.md @@ -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. +**Note:** `imagetools_cors_hosts` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/). + **Type:** `String` ##### 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. +**Note:** `imagetools_proxy` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/) + **Type:** `String` ##### Example diff --git a/plugins/spellchecker.md b/plugins/spellchecker.md index 3de910c36..7ed7fa670 100644 --- a/plugins/spellchecker.md +++ b/plugins/spellchecker.md @@ -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. +**Note:** `spellchecker_rpc_url` is **not** required when enabling this plugin via [TinyMCE Cloud]({{ site.baseurl }}/get-started-cloud/) + **Type:** `String` ##### Example