CODEWITHSUNDEEP
tinymce-4
Recif
Recif

Reputation: 479

tinymce v4 jquery: how to catch onkeyup?

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

Upvotes: 9

Views: 16156

Answers (4)

Rahul Pandey
Rahul Pandey

Reputation: 73

Please make below changes in tinymce.init

tinymce.init({
                selector: "textarea",
                setup: function(editor) {
                editor.on('keyup', function(e) {
                console.log('edited. Contents: ' + editor.getContent());
                check_submit();
                });
                }
                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",
             });

See the below reference for more details.

https://www.tiny.cloud/docs/advanced/events/

Upvotes: 0

Rafael Santos
Rafael Santos

Reputation: 1

tinymce.init({    
        setup: function (editor) {
            editor.on('keyup', function (e) {
                console.log(e);
                //custom logic  
            });
        }
     });

Upvotes: 0

wLc
wLc

Reputation: 1008

    window.onload = function () {
        tinymce.get('content').on('keyup',function(e){
            console.log(this.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,''));
        });
    }

Upvotes: 5

Harry
Harry

Reputation: 3136

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();

Upvotes: 23

Related Questions