Flex WYSIWYG Html Editor
Anyone who has ever worked with html in Flash or Flex knows frustration. It doesn't always display properly, the list of supported html tags is quite short and the RichText editor is borderline useless. Fortunately many of those short comings have been addressed in Air however that doesn't help if you are building something browser based.
I have been recently working on a simple Flex based CMS (content management system) and one requirement was a basic html wysiwyg editor. Thankfully the amount of html to be displayed in the site via Flash was minimal but the editor needed to allow the user to perform some basic tasks like text formatting and adding hyperlinks. There are some really great wysiwyg javascript html editors available (CKEditor and TinyMCE spring to mind) so I wanted to integrate one of those into the cms.
Fortunately with a little knowledge of javascript and css it was not difficult. By using a div layer to display the html editor (I chose CKEditor) and some css, it was pretty simple to place the html editor over the flex app. A few javascript functions called via flash.external.ExternalInterface and the editor can be sized and moved to whereever the Flex app requires.
Here is the first prototype. To the average user it appears that Flex has a built in html wysiwyg html editor. You can even drag the editor window and the div layer will move along with it (unfortunately it's a little sluggish on pc's for some reason).
You can do a view source on the html page to see the javascript and css that is used, nothing special but it does the trick nicely.
Dec 24, 2009 at 1:11 AM
Have you done much cross-browser testing with this? I remember doing this awhile back with some examples I'd found via Google and it worked fine in certain browsers but we had a heck of a time getting it right in Safari. Then when AIR came out we just switched our backend to that and used CKEditor within it and we were all set.
Dec 24, 2009 at 6:09 AM
@rick I did some quick testing on Mac in Firefox 3 and Safari and on PC in Firefox 3 and IE 7/8. Everything worked fine across the board. The only issue on PC is in Firefox the 'move' method fired in Flex during dragging the title window is slow which results in the div layer playing catchup with the window when it moves, instead of a nice seamless move, otherwise it works fine.
Dec 24, 2009 at 12:40 PM
You can cross-browser-test using http://labs.adobe.com/wiki/index.php/BrowserLab
Dec 27, 2009 at 1:57 PM
I have been using flex-iframe for a while with good results.
http://code.google.com/p/flex-iframe/
Feb 09, 2010 at 6:21 AM
WYSIWYG editor visualizes everything what user is producing. It's a very useful tool for fast and convenient website creation.
Thanks for the post.
Feb 12, 2010 at 5:21 PM
Hi Derrick,
Your proyect its very interesting, couse I'm actually working in something similar, Could you show me your flex source code of the editor??
Thanks
Mar 04, 2010 at 9:32 AM
Has the Flex source code been shared yet?