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.
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.
@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.
You can cross-browser-test using http://labs.adobe.com/wiki/index.php/BrowserLab
I have been using flex-iframe for a while with good results.
http://code.google.com/p/flex-iframe/
WYSIWYG editor visualizes everything what user is producing. It’s a very useful tool for fast and convenient website creation.
Thanks for the post.
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
Has the Flex source code been shared yet?
Can you insert non viewable tags into the source when you are in sorce mode?
Hello,
I am interested in licensing/ buying the source for this. Please contact me to discuss if this is possible.
thanks!
Matthew
Hi Derrick,
It looks like the link to the prototype (and thus the ability to view the javascript/css source) is no longer active. Any chance we can still view the html/javascript/css code? What about the flex code? Thank you!
I a interested in your post. But I have tried very much, but I had not successful, Do you think you you could share this code in flex to me? Thank in advance.
My email: mtduit@gmail.com