CODEWITHSUNDEEP
tinymcetinymce-4
Ralph Ritoch
Ralph Ritoch

Reputation: 3440

In TinyMCE 4.x how do you attach a click event handler to content?

I have been trying many things to attach a click event handler to a selection box in tinymce 4.0.2 content with no success. Does anyone know how to do this in a custom plugin? The following is what I have tried but it is not functioning.

ctr++;                      
var id = 'vnetforms_elem_'+ctr;
editor.insertContent('<select id="'+id+'"><option>X</option</select>');                     
tinymce.dom.DOMUtils.bind(tinymce.activeEditor.dom.select('#'+id)[0],'click',function() {
    alert('click!');
});

Upvotes: 3

Views: 2548

Answers (2)

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

I have solved my own problem.

It turns out that this was indeed a bug in firefox. When a select element in firefox is marked as editable it doesn't fire events. I was able to resolve this with the following.

ctr++;                      
var id = 'vnetforms_elem_'+ctr;
editor.insertContent('<select id="'+id+'"></select>');                      
tinymce.activeEditor.dom.select('#'+id)[0].contentEditable = 'false';                       
addEvent(tinymce.activeEditor.dom.select('#'+id)[0],'click',function() {
    alert('MyClick');
});

Where addEvent is defined in the custom plugin as

var addEvent = function(node,eventName,func){

    if ("undefined" == typeof node || null == node) {              
    } else {
        if (!node.ownerDocument.addEventListener && node.ownerDocument.attachEvent) {   
            node.attachEvent('on' + eventName, func);
        } else node.addEventListener(eventName,func,false);
    }
}; this.addEvent = addEvent;

Upvotes: 2

Thariama
Thariama

Reputation: 50832

Using jQuery this may help:

$(ed.getBody()).find('#'+id).bind('click', function() {
    alert('click!');
});

Upvotes: 3

Related Questions