Inline Rich Text Editor

Posted At : January 22, 2008 11:23 PM | Posted By : Gary Gilbert
Related Categories: YUI,Coldfusion,Spry,Examples

I've been looking for a example of using a HTMl rich text editor in a customer site to provide the ability for wysiwyg style editing of content items.

Basically the page would be displayed as a user would see it, they would then click (or double click) on the content item in question which would then be replaced with either a text box or rich text editor where appropriate. Much like flickr does with the image title and description but also with the rich text capabilities. A lot of commercial content management systems provide this type of functionality already but I haven't been able to find an example that I could easily ~~rip off~~ duplicate.

I thought that someone must have an example out in Ajax land and figured if anyone would know it would be Rey Bango after all he is in deep with the guys over at ExtJs and Jquery and Ajaxian. Alas he didn't know of anything concrete but suggested it couldn't be "that hard". Not one to give up so easily on dodging actual work I decided to look around a bit more and finally stumbled upon an example called one editor, multiple edit areas over on yahoo developer.

Sounded promising, and well, it definitely provided me with enough of a start.

Now that I had a way to make an editor appear when a user clicked on a div I just needed a way to send the data back to the server, update or insert a record and of course let the calling page know that something actually happened.

I decided to use spry to do the submitting of the necessary form field since I find how spry does stuff really easy, and lets face it some of the stuff over on Yahoo is a bit too low level.

Keeping it very simple I set up the html on my page like so:

<form name="myform">
<input type="hidden" value="0" name="id" id="id">
<div style="padding-left:50px;padding-top:30px">
            <div id="editable"><b>Double click</b> this text to load the <em>editor with this content</em>.</div>
            <div id="demo" class="yui-skin-sam">

                <textarea id="editor" name="testData">nada</textarea>
                <button id="save">Save Editor Content</button>
            </div>
        <div id="response_box"></div>
        </div>

</form>

The div with the "editable" id will obviously be our target div, the demo div will end up being our rich text editor and save button. The response_box div is where I will write the response from the server.

I then copied the constructor function to create the editor and set up the double click and save listener events. I also added a callback handler function for the spry submit that would give me a bit of feedback on what happened on the server.

I probably also could have submitted it directly to a cfc method but for simplicity sake I submitted it to a cfm page that would send back an xml structure as a response.

<cfcontent type="text/xml">
<cfif form.id eq 0>

<response>
    <message>record inserted</message>
    <id>1</id>
</response>

<cfelse>

<response>
    <message>record Updated</message>
    <id>1</id>
</response>
</cfif>

As I said earlier this was just as a proof of concept. Now that I know it functions as expected we should be able to use a similar methodology to implement different Editors such as TinyMCE or FCKEditor using the same technique.

Happy Coding...