Search code examples
jquerytinymcewysiwygtinymce-4

How to get the element that received the keydown event in TINYMCE


I want to attach a keydown event to my TINYMCE so when a user hits ENTER in his keyboard AND any parent element of the element that fired the keydown has a certain class I would like to show a message (alert) to the user.

So far, after searhing in Google I came up with this:

editor.on("keydown",function(e) {

    if (   (e.keyCode == 13)   &&   (CONDITIONAL)   ) {

        alert('You are not supposed to do this.');

    }

});  

My problem is that this function does not return the inner most (deepest) element that fired the event. How can I get it?

For example, I have this HTML being edited inside tinymce:

<div id="xxx">

    <p class="paragrapch">

        <div>

            <span id="zzz">USER IS TYPING HERE</span>

        </div>

    </p>

</div>

Suppose user is typing something inside the element span#zzz , how can I make the keydown event fire to this element so I can look in all its parent and see if someone has a class "paragraph"?

With jquery this is pretty simples, just use:

$(this).parents(".paragraph").length

BUT if I use the first code that I posted here, "$(this)" is not the inner most element (deepest), it's the body element.


Solution

  • Try using

    editor.selection.getNode()
    

    ...that should get you the element containing the cursor.