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?

Check It Out



Related Blog Entries

Comments
Very nice. Love to see the final. Include would be good, or designed as a custom tag.
# Posted By Cutter | 10/4/06 6:17 PM
Very cool. It seems to use a lot less cpu than fckeditor, which is a definite plus.
# Posted By Sam Clement | 10/4/06 6:48 PM
SPAW has not been updated since 2003, maybe you did not do a broad enough search, because any HTML Rich Text editor is going to be more friendly than any of the flash based ones.
# Posted By Jon | 10/4/06 8:36 PM
Why do you say that Jon?
# Posted By todd | 10/4/06 8:58 PM
If you're speaking of file size, the SWF in my example is around 235kb - whereas FCKEditor is around 2.5mb
# Posted By todd | 10/4/06 9:05 PM
Your example is looking great.
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...
# Posted By Rob | 10/5/06 12:36 AM
I have To agree with Jon on that one in a sense only because with the firefox 2 beta there is spell check and that does not seem to work with flash
# Posted By Akeem | 10/5/06 9:07 AM
Akeem:

Something like this could be integrated:

http://www.bridel.org/?p=12
# Posted By todd | 10/5/06 10:18 AM
Hi, very very Nice!!
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
# Posted By tim | 3/25/07 4:42 PM
great work !!

Any idea how difficult would be to add a file browser button to insert an image?

thanks

Erny
# Posted By Erny | 5/28/07 10:18 AM

Calendar

Sun Mon Tue Wed Thu Fri Sat
   1234
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Subscribe

Enter your email address to subscribe to this blog.

Tags

actionscript ajax blogging cfsnippets coldfusion flash forms flex funny stuff javascript misc model-glue off topic personal project learn slidesix sql

Recent Comments

Adding Auto Generated Code Downloads to BlogCFC
ada5fsa said: http://www.ibiblio.org/st... http://www.ncaonline.org/...... [More]

Chinese Birth Calendar Accuracy Test
mama to be said: ok so i will be 2 months shy of 18 when i have my baby. this calendar does not technically work for ... [More]

Fixing 'User Profile Service Failed The Logon' on Vista
Mike said: That fix worked although all i did was remove .bak and reset state to 0. User was able to log in to... [More]

Chinese Birth Calendar Accuracy Test
Melissa said: Wrong for my daughter, which it predicted to be a boy... we'll see for #2. Predicts a girl (maybe, f... [More]

Adding Auto Generated Code Downloads to BlogCFC
fweerw said: http://www.ibiblio.org/st... http://www.cambodia.ait.a...... [More]

RSS


adobe community experts

coldfusionbloggers

FullAsAGoog MXNA

Consumed By Feed-Squirrel.com