The FCKEditor is one of the best opensource compenents to reach the web.  Written purely in Javascript/DHTML, this rich text editor brings forth a whole new level of website management, allowing you to use a Word-like interface to manage web content.  We've talked about the benefits of the FCKEditor before (checkout WYSIWYG Of The Stars). 

Now, we've been working on taking the next step though.  What if you want to open the editor using AJAX without doing a page refresh?  And what if you also wanted to submit the revised content using an AJAX call as well?  Dig no further, the Zunch Geek Squad has found a workable answer :-)  First, lets review the problems...

Typically, you'd create the instance of the editor by creating the proper iframe element and a hidden input element.  When you first create the iframe dynamically using AJAX, it's not really that big of a deal, everything loads just as you'd expect.  The first problem is that you can't just query the hidden input element for the current value of the editor - that was set when the page loaded, and the hidden input field hasn't been updated since then.  To pull the content out of the editor to send in through an AJAX call, use this Javascript code:

var content = FCKeditorAPI.GetInstance('HiddenInputName'').GetXHTML();

The next problem you'll encouter is that Firefox doesn't seem to like to close and then reopen the editor without refreshing the page first.  This is a simple issue of certain variables already being intialized, so all ya have to do to work around it is destroy the interferring variables.  Turns out the two offending variables can be simply set to Null before ya load the iframe!

FCKeditorAPI = null;
__FCKeditorNS = null;

Now that we've figured out that little nuscance, be expecting to see alot more interactivity in our applications.  We're working hard to build the next generation of applications that will keep your website easily updated and flooded with potential customers. 

PermaLink