CODEWITHSUNDEEP
javascripthtmltinymce
Katalhama
Katalhama

Reputation: 55

TinyMCE textarea doesn't respond to 'onkeydown' event

I'm trying to trigger a warning when the user leaves the page if he had made changes in the textareas of TinyMCE plugin.

There's my code. It works if i use a normal form textarea, but it doesn't go well when i add the 'onkeydown' event to the tiny's textarea. I've comproved the value of 'cambios' with the browser console and i saw that it never changes its value.

JS:

var cambios = false;

function change_cambios (){ cambios = true;}

window.onbeforeunload = function() {
    if(cambios) {
        return confirm('Are you sure?');
    }
    return;
}

HTML:

    <form id="formulari" method="post" >
        <textarea id="ap0sub2" name="area" onkeydown="change_cambios();"></textarea>
    </form>

That works perfectly if i use it within tinyMCE plugin. But when i include the text editor, the value of 'cambios' remains to false.

Any ideas?

Thanks a lot!

Upvotes: 0

Views: 2701

Answers (2)

elnino3800
elnino3800

Reputation: 163

In tinyMce 4:

tinymce.init({
    ...
    init_instance_callback: function (editor) {
        editor.on('keyDown', function (e) {
            console.log('Element clicked:', e.target.nodeName);
        });
    }
});

https://www.tinymce.com/docs/advanced/events/

Upvotes: 1

Moob
Moob

Reputation: 16184

tinyMCE hides the textarea and presents its own contenteditable div so there is no keydown happening on your textarea. You'll need to add the event listener using tinyMCE's methods when you initialise it:

tinyMCE.init({
   selector:'#ap0sub2',
   setup : function(ed) {
                  ed.on('keydown', function(e) {
                     cambios = true;
                     console.log(cambios);
                  });
            }
});

Working demo: http://jsfiddle.net/exmdg7ha/

Upvotes: 1

Related Questions