Adobe AIR: Using a Rich Text Editor – TinyMCE Tutorial

Adobe AIRUPDATE: Please note that this original article was written for a Beat version of AIR. Commenter Jaawad below has indicated that the code here no longer works in the newly released version of AIR. Here’s the old article…First off, I am psyched about Adobe AIR and its possibilities as a development platform. But I’ll save that for a later date. In this post, I want to share a simple example of using Adobe AIR with the TinyMCE rich text editor (wysiwyg editor). To get the lowdown on using TinyMCE, check out the Moxiecode website here….This tutorial includes example files for download below.

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:

, ,

15 Responses to Adobe AIR: Using a Rich Text Editor – TinyMCE Tutorial

  1. Tom April 28, 2008 at 6:57 am #

    Hey Byron,

    Nice work here..helped me out a lot trying to get TinyMCE working in air. Works great with TinyMCE 2.x but some of the getter and setter functions are different in versions 2 and 3.

    I also had to change the iFrame code to

    Have you had any luck with TinyMCE 3.x its working fine the first run through but the next time it loads im getting errors. Don’t have them with me now but I’ll pass them along when I’m back at home.

    Cheers,
    Tom

  2. byron April 28, 2008 at 10:13 am #

    Hi Tom,

    Glad that helped. I spent hours trying to get TinyMCE going back in October. I haven’t tried to get v. 3.x working yet. I’m sure that Adobe AIR and TinyMCE have both come along ways since October, so hopefully they’ve ironed out some of the problems I was having.

    Best regards,
    Byron

  3. Jawaad May 1, 2008 at 12:56 am #

    Hey Byron,

    Thanks for sharing your code – I was looking into doing this myself, but it looks like your code no longer works in the newest version of Air :-( I tried messing around with the config files but all it produces is this:

    TypeError: Undefined value
    getContent at app:/example.html : 36
    getContent at app:/example.html : 36
    getContent at app:/example.html : 36
    getContent at app:/example.html : 36
    showContent at app:/example.html : 41
    showContent at app:/example.html : 41
    showContent at app:/example.html : 41
    onclick at app:/example.html : 50

    I’m going to see about what I can do to fix it but I just thought I’d give you the heads up…

  4. byron May 1, 2008 at 8:12 am #

    Thanks for the heads up Jawaad. I haven’t tried to get it working in the final release of AIR. I’ve made a note at the top of the post for new readers based on your comment.

    Byron

  5. Tom May 1, 2008 at 10:17 am #

    I think the problem you’re having comes from the iframe code. I believe I changed it to somethin like

  6. Tom May 1, 2008 at 2:59 pm #

    Hmm seems the code went missing there….

    Basically I think you want to use
    iframe src=”http://air/tinymce.html” id=”pp_content_txt” sandboxRoot=”http://air/”
    documentRoot=”app:/” scrolling=”no” width=”100%” height=”570″ border=”0″
    frameborder=”0″
    onfocus = “this.contentWindow.childSandboxBridge.focus()”

  7. byron May 1, 2008 at 3:22 pm #

    Thanks for the code, Tom…Wordpress gets finicky about what it lets through.

  8. Kwasi November 4, 2008 at 11:17 am #

    I’m having problems and I’m not sure if this site is still active, our post rather, in regards to using tinymce in AIR.

    I can;t get it working with this code

    I keep getting, Warning: HTTP send request error, 12007: /component/Editor.htm

    What is wrong, this is how it is included in AIR app…

    /***/
    private function _init():void{
    _editor = new HTML();
    _editor.percentWidth = 100;
    _editor.height = 500;

    _editor.addEventListener( Event.COMPLETE, _loaded );
    _editor.location= “file:///”+Configuration.applicationDirectory+”/component/EditorInstance.htm”;

    this.addChild( _editor );
    }

  9. Kwasi November 4, 2008 at 11:19 am #

    HTML Is as follows

    with all the other stuff… found in download file

  10. Byron Bennett November 4, 2008 at 11:31 am #

    Hi Kwasi,

    Sorry, this article referred to a Beta version of Adobe Air and the code does not work with the latest release. You might check out what Tom says in the comment above. Unfortunately I haven’t tried out the new version of Air, so I can’t really point you the right way with that.

    Byron

  11. Kwasi November 4, 2008 at 11:50 am #

    thanks Byron, just been search through out the internet for weeks now, and no comments on that error, totally frustrating…

    Thanks for your time, if I find anything I will post it here as while.

  12. Jamie December 20, 2008 at 11:24 am #

    Looks like Bee has been updated for Air 1.5. It uses the TinyMCE editor, so check the latest update at http://www.adobe.com/devnet/air/ajax/samples.html

  13. Byron Bennett December 22, 2008 at 8:47 am #

    Hi Jamie,
    Thanks for the tip….I’ve taken a year hiatus from when I was dabbling in AIR….I think I’m ready to try it again. Got a little personal project that I’ve been itching to work on.

    Cheers!
    Byron

  14. Daniel November 17, 2009 at 6:38 am #

    Hi all,
    Im dealing with serious problems since i updated to AIR1.5. FCKEditor no longer loads:
    “ReferenceError: Can’t find variable: FCKeditor”
    Looks like it is understanding the relative paths in a different way…
    Unfortunaty im still not able to get it working :(
    Any thoughts?

    Thanks in advance…

    d

  15. Weston Hogan March 5, 2010 at 1:03 pm #

    Dreamweaver has been for a while my personal goto program for years. I truly do not know what I would do with out it. There were moments when I first started out making use of the program, and I thought it was way too complex. Now I fly around it, and it has become a strong asset in my personal tool box. Anyway thanks for the posting.

Powered by WordPress. Designed by Woo Themes