Dynamically Switching To FCKEditor

I’m doing a little work building a page editing tool for a CMS. Each page can have a number of different types of elements and I’ve decided that blocks of text will be controlled using FCKEditor. Rather than having a number of FCKEditor instances on a page I wanted to allow the user to be able to click on a button to instantiate an FCKEditor instance and move the text into it. After a little thought, it turned out to just require a pretty simply bit of javascript:

	function switchElement(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	= '' ;
		oFCKeditor.ReplaceTextarea();
	}

This will convert a block of text contained within a ‘div’ element with a given ID to be converted into an FCKEditor instance. It’ll be pretty trivial to develop this to create the whole form. The next step will be to use XMLHTTPRequest to allow the editing to take place inline.

In the process I noticed that the FCKEditor manual implies that when instantiating the FCKEditor object with:

var oFCKeditor = new FCKeditor(text_area_name);

the user should specify the textarea’s id attribute, but in fact it requires the element’s name attribute.

NB: Only tested in Firefox.