Using TinyMCE with Ajax in ASP.NET MVC

I was having some problems with getting TinyMCE to work nicely in ASP.NET MVC when using Ajax.BeginForm().

Luckily, it was quite easy to come up with a solution!

The problem is that when using TinyMCE the desired textarea value doesn’t get set by TinyMCE, cause it doesn’t respond to the ajax form submit. The solution is to trigger the Save option of TinyMCE, so that the ajax script just sees a populated textarea.

I first tried to use the OnBegin Callback in the AjaxOptions, to execute tinyMCE.triggerSave(), but somehow that always fired after the ajaxscript had collected the form values. So, it would be very nice to have that one, but I guess the design is not right for that. Too bad.

What did work was to autosave everytime the content of the tinymce editor changed. This is maybe a bit overkill, but it is the most reliable solution I found.

 tinyMCE.init({	
	mode : "specific_textareas",
	editor_selector : "mceEditor",
	add_form_submit_trigger: false,
	setup: function(ed) {
	    ed.onChange.add(
	        function (ed, evt) {
	            tinyMCE.triggerSave();   
	        }
	    )
	}

});

You’ll also maybe want a function that cleans the TinyMCE editor after a formsubmit.

//View, Ajax.BeginForm
 new AjaxOptions() {  OnComplete = "tinymceTriggerEmpty" 

//Script
function tinymceTriggerEmpty() {
    tinyMCE.execCommand('mceSetContent', false, '');
};