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.

Tags: , ,

10 comments

  1. bonsoir,

    je vous remercie de me transmettre le fichier “test” décrit ci-dessus.
    salutations – Jean-Marie Griess

  2. I did the almost the same, but in the Final Candidate preview release the second time you generate a new editor, it fails…

  3. Yeah, I had a problem when I switched from RC2 to RC3. A few of us have commented on that on the dicussion boards, but if it’s still there in another RC a bug should definitely be filed.

  4. Have you had any succes with making FCKeditor work with XMLHTTPRequest to allow inline editing? I really need it for an app I am working on, and have had no luck finding help on this.

  5. I did get it working, but it’s been quite a while since I looked at it as I’m no longer on that project.

    For other work, I’ve abandoned FCKEditor as it was way too bloated and very ugly inside. I’ve done a little work with the wysiwyg editor in Dojo which doesn’t have all the features, but is much lighter and easily integrated with an Ajax application using dojo’s own implementation.

  6. Hmm. not using Dojo, but I could use some assistance. I built an app to display course syllabi online. (I work for a college) I was using FCKeditor and the app was originally written for ASP, then converted to .NET. Now I am making another conversion to PHP to go along with our CMS (PhpWebsite).

    So i want a page that displays the syllabus, then each editable field that requires use of a wysiwyg editor pass the updates via XMLHTTPRequest to allow for “inline editing”. I really don’t have a preference on which editor I use, but like FCK’s image handler.

    Any help you could give would be greatly appreciated.

  7. I’m afraid I’m not in the business of using this comments are as a training/support space! What you’re looking to do should be fairly straightforward, but if you need help I’d suggest signing up for one of the relevant mailing lists or checking to see if there are IRC channels for the tools you’re using.

  8. Well, it was worth a shot I suppose. thanks anyway.

  9. Tommy, my company works with editors including this one. We design CF and PHP CMS enabled back ends for business and schools.
    If you would like to out source this we might be interested in the work.

    -Daniel at dosolutions dot com