TinyMCE and jQuery validation

I’ve recently been working on a project using the ASP.Net MVC framework (more on that in a later post perhaps), where the TinyMCE editor was used as the rich text input method of choice. We hit a snag when it came to applying client-side validation through jQuery: jQuery was validating the textarea before TinyMCE was filling it in with the editor content.

A quick search for ‘TinyMCE jQuery validation‘ turned up a very helpful article by Rebecca Murphy (link).  This was a godsend for us, as we were worried about having to either scrap TinyMCE or have no client-side validation for any rich text boxes (the horror).  However, it wasn’t quite what we needed.  We had a page that contained a number of TinyMCE boxes, so we needed to make sure that each one would be properly updated when its associated form submit button was pressed.

Fortunately, after my own trip to the TinyMCE API, I spotted the init_instance_callback option, which allowed a function to be called upon the creation of a new editor.  Perfect.  The initial version of the code is below, hopefully if anyone else finds themselves in a tight spot, it might help them out.

tinyMCE.init({
    mode : 'textareas',
    theme : 'advanced',
    theme_advanced_buttons1 : 'bold,italic,underline',
    theme_advanced_buttons2 : '',
    theme_advanced_buttons3 : '',
    theme_advanced_toolbar_location : 'top',
    theme_advanced_toolbar_align : 'left',
    theme_advanced_statusbar_location : 'bottom',
    init_instance_callback : "initialiseInstance"
});

function initialiseInstance(editor)
{
    //Get the textarea
    var container = $('#' + editor.editorId);

    //Get the form submit buttons for the textarea
    $(editor.formElement).find("input[type=submit]").click(
        function(event)
        {
            container.val(editor.getContent());
        }
    );
}