Thursday 14 May 2009

TinyMCE UpdatePanel Javascript errors

I have spent days on this one, and it took myself and a colleague both working on it to find a solution that actually worked!

Here's the scenario.... you want to use TinyMCE, and have it working in an UpdatePanel. It sounds simple enough.

What I did was add the TinyMCE editor script, setup my tinyMCE.init() method, and hey presto, I got my editors. I set my code behind for my save button, and it fired fine when pressed, however, the editor disappeared! So, I moved my init function into the code behind, and registered it with the scriptmanager.registerclientscript method. This was fine, and when svaing my content, the editor did not disappear anymore - however, when I clicked the save button for a second time, I got a javascript error on the editor trying to access it's content.

The specific part of the javascript from tiny_mce.js was erroring on "return this.bodyElementthis.getDoc().body"

Anyway, I searched through many examples of how to solve this, including remove the editors before performing the postback, and eventually found a downloadable example that worked:

http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file

However, when I tried to use this in my application, with TinyMCE version 3.2.3, it didn't work. I copied over the version from this download, and then it seemed to fix the problem - but I lost some of the TinyMCE functionality!

Eventually, my colleague stumbled upon this absoluetly brilliant .NET extender, that handles everything for you, and allows you customise each editor independantly:

http://weblogs.asp.net/cjdevos/archive/2008/06/19/ajax-extender-for-tinymce-continued.aspx

So, if your having problems with TinyMCE and updatepanels - download it and use it!

No comments:

Post a Comment