TinyMCE is a great HTML editor and it is pretty easy to install and configure the editor on a web page. You should just call the init() function while loading the web page at the client’s browser and the target text-area will be transformed into a nice looking HTML editor.

However, we run into some troubles when we tried to use the TinyMCE editor on an ASP.NET page containing server inputs that are handled by the Microsoft’s UpdatePanel control.

To explain the issues, we would like to remind you how the UpdatePanel works. The typical ASP.NET page works by handling the various events triggered by the user’s actions (e.g. button clicks, etc.) on the server side. Each post-back to the server causes the entire web page to be submitted to the server and then re-loaded in the client’s browser. To avoid this behavior and make the process smoother Microsoft implemented the UpdatePanel control which is handling all the calls to the server by utilizing the Ajax technology. When the user clicks on a button, which would normally cause a full post-back, the UpdatePanel’s functionality collects all the form’s data and sends an Ajax request to the server. The server processes the request as if it was triggered by a regular post-back and finally the client-side code refreshes the content inside the UpdatePanel with the latest data received from the server. This is causing two problems with TinyMCE as follows:

1. Normally, when the web form is submitted to the server then it sends the content of the TinyMCE editor as well. In the case of the UpdatePanel scenario there is no actual form submit event, the current content of the TinyMCE editor is not saved in the relevant text-area and so it is not being sent to the server.
2. Calling the init() function initializes the editor when the page is loaded and the text-area is replaced by the HTML editor. However, after the UpdatePanel refreshes its content with the data coming from the server then the text-area would re-appear again and it will get rid of the TinyMCE editor.

Following is the solution for these two issues that we found to be working good:

1.  Call the tinyMCE.triggerSave() in JavaScript before triggering the request to the server. Calling this function will cause TinyMCE to save the HTML editor’s content into the underlying text-area. The content of the text-area would be sent to the server. It is important to call the triggerSave() function before initializing the Ajax request. For example, calling it in the beginRequest event is too late because the request data is already collected.So, you could define the following function in JavaScript:

   function BeforePostback() {tinyMCE.triggerSave();}
   

   And register the script by calling the following code in your Page_Load() code on the server-side:

   if (!ScriptManager.GetCurrent(this).IsInAsyncPostBack)
   ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "BeforePostback", "BeforePostback()");
   

   This will cause submitting the actual content of the HTML editor to the server.

To avoid losing the TinyMCE editor after refreshing the UpdatePanel you could do the following:

2. Register an event handler for the endRequest event in JavaScript:

   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler_Page);
   

   Then implement the handler by adding the following JavaScript function:

   function EndRequestHandler_Page(sender, args) {
   
   //1. Remove the existing TinyMCE instance of TinyMCE
   tinyMCE.execCommand('mceRemoveControl', false, "<%= txtMyTextArea.ClientID %>");
   
   //2. Re-init the TinyMCE editor
   tinyMCE.init({
   mode: "textareas",
    ...
   });
   }
   

   Note: We didn’t put the whole content of the init() function since it is out of the current topic.

   Calling the init() function after each server request is completed will make the TinyMCE editor appear again on the page. However, the existing instances of the HTML editor should be “removed” first by calling the ‘mceRemoveControl’ command.

Good luck with using TinyMCE in UpdatePanel!

00000