tinymce v4 jquery: how to catch onkeyup?

Recif picture Recif · Jun 5, 2013 · Viewed 13.2k times · Source

I'm trying to enable submit button when some form fields are filled. I've found a piece of javascript code that works, but I've a problem with textarea fiel which is tranformed by tinymce... How to catch it?

My html:

<form id="form_id1">
<fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />

</fieldset>
<input type="submit" value="Submit" />
</form>

My javascript:

$(document).ready(function()
{

    $('#form_id1 input:submit').attr("disabled", true);
    var textCounter = false;
    $('#form_id1 input:text, #form_id1 textarea').keyup(check_submit);

    function check_submit() {
        $('#form_id1 input:text, #form_id1 textarea').each(function()
          {
            if ($(this).val().length == 0) {
                textCounter = true;
                return false;
               }
            else {
                textCounter = false;
            }
         });

        $('#form_id1 input:submit').attr("disabled", textCounter);
    }
});

My tinymce init:

tinymce.init({
                selector: "textarea",
                language: 'fr_FR',
                image_advtab: true,
                menubar:false,
                forced_root_block: false,
                plugins: ["link","code","media","image","textcolor", "emoticons"],
                toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
             });

Thanks

Answer

Harry picture Harry · Jun 26, 2013

In tinymce init add:

setup: function(ed) {
    ed.on('keyup', function(e) {
        console.log('Editor contents was modified. Contents: ' + ed.getContent());
        check_submit();
    });
}

Keep in mind you might need to find your editor instance rather than the textarea to get the actual value. If you made the textarea have id="textarea-tiny-mce"

tinymce.get('textarea-tiny-mce').getContent();