TinyMCE and Ajax Update Panels
For those of you who want to embed a WYSIWIG HTML editor in your web pages, check out TinyMCE. It is a great editor, very customizable.
I recently tried to put the TinyMCE editor into a project that was using Update Panels from the Microsoft Ajax library (previously called Atlas). The TinyMCE editor is a javascript only library that converts text areas to the WYSIWIG editor. This happens at load time.
The trouble I had was when a textarea is displayed after a post back event (e.g. you clicked a link and the editor comes up). The javascript scans the web page when it loads looking for textareas but fails to scan for textareas that are added as a result of an ajax event. The result is that any textareas that are displayed later simply continue to look like a textarea.
The solution is to make sure the init code is called for tinyMCE and tell it manually to add the new textarea.
In your server side code (where ever that is, clicking a page name, etc..) add this code:
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, Me.GetType(), "Init", "tinyMCE.execCommand('mceAddControl', false, '" + txtPage.ClientID + "');", True)
You tell .Net to setup a line of javascript to run when the ajax call completes. This line of javascript is sufficient to tell TinyMCE the name of the new textarea. Notice that I use the ClientID attribute of the text box in question as the name on the client side can be different due to name mangling. Also note, you may have to change the names of the update panel (updatepanel1) and textarea (txtPage) to match your controls. Otherwise, this code should work. Good luck.
Ray Pulsipher
Owner
Computer Magic And Software Design
