As a side project, for ‘fun,’ I’m rewriting my blog and CMS in Flex and AIR respectively, and while I’m pretty well satisfied with the design thus far, the one major pain point remains working with (which is to say performing CRUD operations on) legacy HTML content, and rendering that HTML content decently in both the browser and the Flash player. Sure, I can use the out-of-the-box RichTextEditor and TextArea controls, but both tend to choke on displaying and manipulating simple markup (e.g., single or absent quotes on attributes, image alignment, etc.), and the content it generates by default, while beautifully rendered in the Flash player, usually looks ridiculous in the browser — an important factor to me, since I’d like to continue publishing RSS.
I know there are a couple of RichTextEditor derivatives out there, but before heading down the road with any of them, or down the alternative road of manipulating the content manually, I figured I’d poll the group here first, to see whether anyone’s tackled this problem before; it seems like it has to be a fairly common use case.
Thanks in advance for your insights!
The problem you’ve hit is Flash natively supports a very small subset of HTML. So any editing you do to fit the Flash player will make it render much more primitively in HTML. Personally I think the conflicting aims of editing legacy content in Flash and displaying cleanly in both Browser and Flash are going to be too difficult to resolve.
One alternative would be to write your own text layout engine, much like the team working on Buzzword did. Given it took them many months to produce their application, I suspect this is massively out of scope for your plans 🙂
Another, simpler alternative would be to apply a server side transformer over the HTML content to simplify it down to Flash level. This would enable you to have a richly layed out HTML document, and a simpler Flash document. However it won’t help you edit it in the Flash player.
If you wanted to edit your HTML in Flash, you might be able to use the wmode + iFrame trick first mentioned by Christophe Coenraets and updated by Renaun Erickson to give yourself a dual-live preview but you are still going to have the problems with different levels of HTML support by Flash and Browser. And editing a textfield to manually edit-then-preview your content really isn’t what you want to be doing.
A final option would be to investigate the newly-in-beta Text Layout Framework which would help give you some of the more extensive WYSIWYG parts of HTML. This looks a complicated but fairly feature rich. It works with Flex 3.2 / Flex 4 / Flash CS4. Of course this in beta, so may change at some point in the future.
As an aside, if you are building an AIR application, perhaps building a HTML+JS AIR application using existing JS+HTML editors such as FCKEditor would be a viable solution? Then you would just have to render for the Flash player (perhaps using a transformer approach as detailed above).