Thursday, July 19, 2007

TinyMCE inside of an ASP.NET Ajax UpdatePanel

Yesterday I went hunting for information on how to get the
web WYSIWYG editor TinyMCE to work inside of an ASP.NET UpdatePanel.

There are a few solutions for this on the web, nothing near as complete as Jesper Lind's post (Swedish), but even that failed to work. I replied to the post asking if he had some simple example that he could show and as a result we now have this complete example.

Here is a VB.NET version of Jesper's example I made when adapting the code to work in my VB.NET project at work.

Update: 2007-07-30
Having had some experience with using this I'd highly recommend that you use webservices as the editors inside of any non-trivial updatepanel setup can become quite slow to reload.

To use TinyMCE on an Ajax form, load TinyMCE at page load as usual, but run "tinyMce.updateContent(text-area-id)" after you load text into the textareas so that it is displayed. If you have any problems with IE6 not updating the content, check this thread out. Also run tinyMCE.triggerSave(true, true) before saving so that TinyMCE copies text back from the editors.


Jesper said...

The use of web services sounds like an interesting solution for this problem, with the slow loading situation. I have not tried using this technique myself so I don't know how it works yet. Exactly why is the TinyMCE loading quicker?

Have you set it up so that the editor doesn't reload at all in the browser? Very cool in that case. I will try to learn more about this.

Joakim said...

TinyMCE takes the same time to load, but the trick is that it never reloads, I only replace the content within it when I get it back from the WebService.

I'm writing another blog post and example comparing the use of UpdatePanel and WebServices, I'll hopefully have that up within a couple of days.

Jesper said...

That sounds great, looking forward to read about how you did that.