Flex Rich Text Editor For Use In An HTML Form
There are lots of WYSIWYG text editors out there like FCKEditor and SPAW just to name a few. I've tried some of them, but they all seem somewhat bloated in my opinion. I want something lightweight and simple, but powerful enough to do some basic text formatting. I did a little Googling and found the Rich Text Editor with Disclosable Controls for Flex 2 (created by Peter Baird). This is a pretty sweet little Rich Text Editor! So my next thought was, how can I hook this into being used as a WYSIWYG editor in a simple html form? I did a little more research and learned about the Flex ExternalInterface class. The Livedocs describe the ExternalInterface as follows:
The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded. Use of ExternalInterface is recommended for all JavaScript-ActionScript communication.
I took Peter's editor and added some ActionScript and compiled the SWF. I then took the generated html wrapper and added the necessary JavaScript to facilitate the communication between the containers. I next saved the wrapper as a cfm so that I could take advantage of using cf variables in prepopulating the Text Editor (as you would with a query for example). The final result is pretty sweet. The RTE is prepopulated from a cf variable, all changes made in the RTE immediately update a textarea (which could easily be hidden) in the html form and the resulting html text is submitted with the html form (which could then be saved in the db). This is my first experience in building a Flex application, so I'm not going to release the code quite yet (it's a mess anyways!!) I'm not quite sure what step to take next. I suppose It's possible that this could be packaged and used as a cfinclude within any html form. Anyone have any other ideas?
Custom tag may be nice, to be able to have multiples RTE in one page.
Any idea how difficult would be to add a file browser button to insert an image?
FlashLoaded has an example with and Image and SWF Insertion File Upload Interface with their FTE:
http://www.flashloaded.com/flashcomponents/flashte...
Something like this could be integrated:
http://www.bridel.org/?p=12
Thank you for the contribution.
I have a question for you regarding actually using the generated html from the RTE.
The issue is that the font tag uses an illegal font size schema.
i have been attempting to build a scrubbing function to replace all the <font size= with <font size=x style:font-size:x;
the other problem is that if you are saving the content in a db, and later displaying it again in flex, it will not appear with the above modification to the text. so the answer i have found is to format the text before displaying it in real html.
what are your thoughts on this?
thanks
tim
Any idea how difficult would be to add a file browser button to insert an image?
thanks
Erny