Choosing the TinyMCE Editor & Why FCKEditor doesn’t work with AIR

There are a number of very good and free HTML editors on the web that you can use in your applications. These include Yahoo’s YUI Rich Text Editor, the FCKEditor, Dojo’s Dijit Editor, the Ext framework’s HTMLEditor, and TinyMCE among others. Unfortunately, not all editors will work within Adobe AIR. AIR uses WebKit as its HTML rendering engine. This is the same engine used by Safari, so if your chosen editor does not support Safari, it is likely that you will not be able to use it in AIR. At this point (10/19/2007) FCKEditor does not work with versions of Safari prior to version 3.0, so it probably doesn’t work in AIR either (see their compatibility list on front page – upper right corner, hover over the Safari icon).

I mention FCKEditor because I like some of the functions it has, like built in image and file uploading, and a sweet little plugin that lets you switch toolbars on the fly so you can set up tabs like on Google Docs to change the toolset. You may be able to do these with TinyMCE, but I haven’t found them yet.

Regardless of the editor you choose, this method for displaying and accessing your editor should work as long as it’s compatible with AIR. You’ll need to use your editor’s methods for instantiating itself, but the sandbox concept is all AIR.

Using TinyMCE in Adobe AIR Tutorial and Example

I spent several hours trying to get TinyMCE working in AIR and finally did! Even Google was of no help in finding the answers. Ultimately, it required reverse engineering Adobe’s Bee.AIR sample application. So I hope that this example will save you some time.

I started my journey by creating a basic HTML file that included the TinyMCE.js file just like the examples on their site showed. In this file, you would have a <textarea> tag and a couple of lines of javascript using the tinyMCE.init() function to transform the textarea into the TinyMCE editor. Running this locally in Safari worked perfectly, so at least the plumbing should work in AIR.

If you use Dreamweaver or Aptana, check out Adobe’s AIR extension for Dreamweaver (they also have a plugin for Aptana). This will save you from having to run your debug and packaging in the command line. Make sure you’ve got your site set up as a site in DW, then go to Site/Air Application Settings. The full documentation for using AIR in Dreamweaver is here.

Previewing the application (from within Dreamweaver menu path: Site/Air Application Settings), did not transform the textarea into a TinyMCE editor. Adobe’s blog editing sample application Bee.AIR came to the rescue for figuring out how to get TinyMCE to do its thing in AIR. The problem was that you have to place the editor in a remote sandbox. The example below describes how to set that up.

I have included the source code for a very simple working sample application below, as well as a packaged/installable version of the AIR application. Here goes with the steps it took to get this to work:

1. Make sure you have installed the latest version of Adobe Air Integrated Runtime on your computer (Air Beta 2 at the time of this writing). Download at the Adobe download page here.
2. You must have the Air SDK installed (available at Adobe download page). A great, and almost required, tutorial is here at Airdev.org. I use a Mac and have never monkeyed around with Terminal. So this came in very handy.
3. Install the extension for your IDE (available at Adobe download page): Dreamweaver and Aptana are provided by Adobe
4. Your app will need 2 html files plus the TinyMCE package
   1. Main application .html file representing the Application Sandbox. You can access the AIR API’s directly from this file and from script files you include here
   2. An .html file containing the TinyMCE setup and textarea. This will be placed in the remote Sandbox. To access AIR API’s here, you’ll need to use the Sandbox Bridge. Read more on the security model at the Abode AIR with HTML & AJAX Documentation. Navigate the tree to: Application Development Essentials/AIR Security/Sandboxes.
   3. The TinyMCE package…this is a big Gotcha! You can download TinyMCE from the MoxieCode website, but using this does not work when trying to install your finished application. Using the official version downloaded from MoxieCode works just fine in Preview from within Dreamweaver (which launches the ADL tool that comes with the SDK). Even using the Create AIR File option in Dreamweaver to build your AIR application package works fine. But trying to install your AIR application will give you the following error:
      

      Installation error:
      Missing digested package file: tinymce/jscripts/tiny_mce/plugins/cleanup/editor_plugin.js

      This was fixed by simply using the TinyMCE folder provided with the Bee source files. This version of the editor appears to be the current version on the Moxiecode website, but it contains several modifications, including an override of the <hr/> insert function which you may want to fix. Now the app installs and the editor is visible, but it’s disabled. This is fixed by replacing the tiny_mce_src.js file in Bee’s version with the copy of the file provided with the official version. If you do all of that, it should work. Or, you can just use the package provided in the sample application I provide below.

      If anybody figures out what the deal is with this, please…please…let share that in the comments.

   4. The other files included in the attached sample application are not required for using tinyMCE with Air. Prototype is just there to make my life easier. The AIRAliases.js file contains aliases to Air classes, shortening your code when using the AIR API. These aliases aren’t used at all in this example even though I included the file.
5. Your TinyMCE editor will need to go in an iframe in your main HTML file. This iframe sets up the remote sandbox, giving it security priviledges that are not available in the application sandbox. The markup for putting your TinyMCE editor on your page should look something like:
   

   
<div style="margin-top: 20px;">
<iframe src="http://air/tinymce.html" id="pp_content_txt" sandboxRoot="http://air/"
documentRoot="app-resource:/" scrolling="no" width="100%" height="270"
onfocus = "this.contentWindow.childSandboxBridge.focus()">
</iframe>
</div>

6. That iframe pulls in your tinymce.html file as its source. This file contains the code to include the TinyMCE javascript files and instantiate an editor. It will look like a standard html file with some key items:
   • A script tag, pulling in the tiny_mce_src.js file
   • Script in the head that initializes the TinyMCE instance: uses the tinyMCE.init() function
   • More script in the head (or potentially an included .js file) that handles the tinyMCE functions like: setContent() and getContent(), etc
   • A textarea that will be transformed into the editor by the tinyMCE.init() function

The example files are available for download below. If you haven’t already done so, you’ll need to get steps 1 through 3 done first. Just because you can run Air apps (step 1) on your computer doesn’t mean you’re configured to create them (steps 2 & 3…with 3 being optional, but recommended).

Update: I’ve learned a lot about the Sandboxes over the last couple of weeks and now have an understanding of how and why to use it. The Sandbox is definitely your friend. TinyMCE has to reside in the remote sandbox because it uses eval() and possibly other functions that are not allowed in the application sandbox (where the main app resides). If you’re doing an HTML/Javascript app, you’ll likely do most of your HTML and a good bit of your JS in the remote sandbox. You can’t reach the AIR API’s from the remote sandbox directly, so you have to build objects that expose function to both the parent and child sandboxes so they can communicate. There’s a lot to learn here. A good start is found in the Abode AIR with HTML & AJAX Documentation under: Application Development Essentials/AIR Security/Sandboxes.

Downloads for the example app:

Adobe Air: TinyMCE Example (AIR application)
Adobe Air: TinyMCE Example (Source files)

Other helpful Adobe Air tutorials and links:

• Adobe AIR downloads
• Adobe AIR sample applications
• Creating your first HTML AIR app in Dreamweaver – Adobe’s tutorial
• Creating your first HTML & Javascript app in Adobe Air – Airdev.org’s tutorial
• Installing the Adobe AIR SDK – a must read as far as I’m concerned
• more to come…make your own suggestions below!