Embedding tinyMCE or firebug-lite in the <mx:HTML> tag of an AIR project

When I started experimenting with the mx:HTML tag in AIR, I ran into a series of problem. Javascrpt code that would run perfectly fine in the webkit browser running on the desktop would not run correctly in an AIR app (using the same version of webkit) .

I tried to use AIRIntrospector.js but then I got "You need to include AIRIntrospector.js in your application sandbox." Google wasn't of much help. I got a very small number of hits, with posts mentioning the problem. However, I couldn't find any obvious solution.

I then wondered if firebug-lite could be of any help. But whenever I tried, I ran into the same problems again. Not all javascript code would be executed. A few more google searches turned up a most helpful resource. PhoneGap simulator in AIR by Yohei Shimomae.

It contained a successful call to firebug in the mx:HTML tag of an AIR project. The key to having javascript run properly in the HTML tag is to set the location to a file:// reference.

private function init():void
var fileText:String = File.applicationDirectory.nativePath.replace(/\\/g, "/");
html.location = 'file://' + fileText + '/js/tinymce/examples/index.html';

As I was at it, I also tried to run tinyMCE. Works like a charm. The screenshot below shows both tinyMCE and firebug working in an HTML tag in AIR.

Download Flex project (fxp, flex 4)

Powered by Drupal, an open source content management system