The hunt for AJAX/WYSIWYG ‘edit in place’

For a while now I’ve been using FCKeditor as the editor for my Topic Maps engine - one written in plain and simple VBScript/ASP. In its development evolution I decided that it was better to store the XHTML content in a separate xml file and then use the xsl document() function to grab it and style it along with its parent metadata stored in the xml topic map file. Then I decided I wanted to integrate some level of AJAX editing support, like the stuff I’m used to using in Flickr. So, I went looking.

What I found was surprising. There’s lots of people out there working with great open source WYSIWYG editors like TinyMCE and FCKeditor. There’s also lots of people playing with Scriptaculous and, it’s parent, Prototype, to produce really cool AJAX effects. What I couldn’t find also surprised me - where was the integration of FCKeditor and AJAX for Flickr-like editing?

I found one refernce to using FCKeditor and AJAX. It recommended you stick the following in at the top of your javascript:

FCKeditorAPI = null;
__FCKeditorNS = null;

This will allow Firefox to play nice with AJAX - a good place to start.

Next, I found an article by Joseph Scott, a a few others like it, on edit in place functionality for a web page based on Prototype to produce almost the same behaviour as you get on Flickr. Inevitably, each of these postings generated the same question that was on my own mind - how would you do this with a WYSIWYG editor like TinyMCE or FCKeditor?

I found another article on how you might initialise FCKeditor using AJAX editing, but it was really only a code snippet and it didn’t work the same way in Firefox and IE6.

function switch2Editor(div_id, text_area_name) {
var our_div = document.getElementById(div_id);
thetext = our_div.firstChild;

var textarea = document.createElement(’textarea’);
textarea.setAttribute(”id”, text_area_name);
textarea.setAttribute(”name”, text_area_name);
textarea.appendChild(thetext);
our_div.appendChild(textarea);

var oFCKeditor = new FCKeditor(text_area_name);
oFCKeditor.BasePath = ‘/assets/FCKeditor/’ ;
oFCKeditor.ReplaceTextarea();
//oFCKeditor.Create(); using this creates the editor in a new window … not what we want for an in-place-editor
}

In IE6, the code swaps a <div> container’s content with the FCKeditor. If the <div> has multiple paragraphs and other formatting, the formatting is lost during the swap. The old container then vanishes. In FF, an FCKeditor is produced under the <div>, but no content is transferred and the <div> does not vanish. Overall, the result was ok, but still not what I wanted.

What next? Well, I think Prototype will suit my needs insofar as it enables editing of the titles and basic text fields for my Topic Maps engine. I need to find, though, an example of WYSIWYG editor support for content blobs.

Read on to part II >>

M

---

Possibly related posts: (automatically generated)

• WYSIWYG editor for GuruLib