TinyMCE on a CDN

This is a modification of the most recent stable version of TinyMCE (3.2.1.1), released 2008-11-27.
It’s been designed to be hosted on a content delivery network and work correctly at least for FF and WebKit-based browsers.

Installation

There are three steps to install TinyMCE on a CDN:

• Compile The HTM files Into JS files using the included script
• Upload the jscripts/tiny_mce folder to your CDN
• Call TinyMCE correctly from your web page

Compile The HTM files Into JS files using the included script

In order to install TinyMCE on a CDN, the base version of the tiny_mce .htm files must be turned into .js files that write out
the equivalent HTML code. To “compile” these htm files into .js files, run the development/cdn-compile.rb script. The format is:

  ruby development/cdn-compile.rb local/path/to/jscripts/tiny_mce assethosturl.com/path/to/tiny_mce

Here’s an example if you wanted to use Amazon S3, with a bucket called “my-bucket”:

  ruby development/cdn-compile.rb jscripts/tiny_mce s3.amazonaws.com/my-bucket

In the correct directories, you’ll now see .cdn.js files created, e.g. jscripts/tiny_mce/plugin/advhr/rule.htm.cdn.js.
This file was created by the cdn-compile.rb script, using the source html file jscripts/tiny_mce/plugin/advhr/rule.htm.

Upload the jscripts/tiny_mce folder to your CDN

Now that all your files are in the right place, you can simply upload the tiny_mce folder to the right place on your CDN.
Every CDN is different, so we’ll just work with our Amazon S3 example, and you can modify the process to your own CDN.

In the Amazon S3 example, we told the cdn-compile.rb script that our asset host url and path was s3.amazonaws.com/my-bucket,
which means that the browser will be looking for the scripts starting at http://s3.amazonaws.com/my-bucket/tiny_mce.js.

So, we can open up our trusty s3fox plugin, and upload the contents of
jscripts/tiny_mce/* into the bucket called my-bucket. Once we do the upload, the my-bucket directory on S3 will have the
following files:

• langs/
• plugins/
• themes/
• utils/
• license.txt
• tiny_mce.js
• tiny_mce_popup.js
• tiny_mce_src.js

And that’s it! Don’t forget to recursively set the Access Control List (ACL) of your my-bucket to be readable by everyone.

Call TinyMCE correctly from your web page

As you probably know, to instantiate TinyMCE, you typically call the tinyMCE.init method, after including the javascript
(e.g. after >script type="text/javascript" src="http://www.mysite.com/javascripts/tiny_mce.js"<). You still do the same
process for the CDN version, but you have to add a special parameter that tells the script about your CDN.

The calls now look like this:

  <script type="text/javascript" src="http://s3.amazonaws.com/my-bucket/tiny_mce.js">
  <script>
  tinyMCE.init({
    ...
    cdn_host: 's3.amazonaws.com/tinymce-cdn',
    ...
  });
  </script>

The cdn_host parameter tells the script that it should be loading all plugins from the CDN source, rather than elsewhere.

How TinyMCE CDN Works

There have been a couple of changes to the source of TinyMCE to make it work with a CDN. The best way is to look at our patch
which outlines the changes. You can find this in the development directory, in a file called cdn-changes.

Here’s a link to it: TinyMCE CDN patch