How to get TinyMCE and Jquery validate to work together?

Question

Hi

I am using jquery validate and the jquery version of tinymce.

I found this piece of code that makes tinymce to validate itself every time something changes in it.

Hi

I am using the jquery validate with my jquery tinymce so I have this in my code

    // update validation status on change
    onchange_callback: function (editor)
    {
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
    },

This works however there is one problem. If a user copies something from word it brings all that junk styling with it what is usually over 50,000 characters. This is way over my amount of characters a user is allowed to type in.

So my jquery validation method goes off telling me that they went over the limit. In the mean time though tinymce has cleaned up that mess and it could be possible now the user has not gone over the limit.

Yet the message is still there.

So is there a better function call I can put this in? Maybe tell tinymce to delay the valid when a paste is happening, or maybe a different callback?

Anyone got any ideas?

Answer 1

Oh yeah, I also faced this problem.

So, I fixed it by calling the validation on the click event of a button instead.

$("#buttontosave").click(function() {
         tinyMCE.triggerSave();
         var status;
         status = $("#myform").valid(); //Validate again
         if(status==true) { 
             //Carry on
         }
         else { }
});

This works try it.

For additional resources try

http://blog.rebeccamurphey.com/2009/01/12/jquery-validation-and-tinymce/

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=21588

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_23941005.html

Answer 2

Recently, I had some related difficulties with the timing of when event handlers fire, particularly as the size of the character buffer pasted in from Word increases. The event I was interested in was the key-up: as the user types into a headline field (for a blog post), the app updates an auto-generated permalink field. I ended up with a belt-and-suspenders approach: handle the key-up and handle the change event, just in case. An abridged version of my code:

hdlHeadlineChange = function (code) {

    //NOTES: The 'code' argument is for debugging purposes only: it helps you
    //figure out which event has fired.

    var headlineText = $(tinyMCE.selectedInstance.getBody()).text();

    //heuristically detect and ignore text with embedded Microsoft Word markup
    if (headlineText.match(/<!--/)) {
        return;
    }

    //as a backstop, trim excessively long text to fit database maximum lengths
    var truncateLength;    
    var semanticTitle = replaceSpecialCharactersInSemanticUrl(headlineText);

    //trim the permalink to fit the 255-character max in the database            
    truncateLength = 255 - $('#permalinkPreface').text().length;
    $('#permalinkSpan').text(semanticTitle.substring(0, truncateLength));
};

function setupHeadlineEventHandlers() {
    tinyMCE.get("headline").onKeyUp.add(function(ed, evt) {
        hdlHeadlineChange(evt.keyCode);
    });

    //NOTES: This handler is sort of a backstop.  Although the key-up handler may see text
    //with markup, we expect that the change handler will not.
    $('#headline').change(function () {
        hdlHeadlineChange(-1);
    });
}

The key point is that I used .change() to arm the event handler, rather than onchange_callback.