tinymce - 在 TinyMCE 4.x 中，如何将点击事件处理程序附加到内容？

Question

我一直在尝试很多事情来将点击事件处理程序附加到 tinymce 4.0.2 内容中的选择框，但没有成功。有谁知道如何在自定义插件中做到这一点？以下是我尝试过的，但它不起作用。

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!');
});

Answer 1

使用 jQuery 这可能会有所帮助：

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

Answer 2

我已经解决了我自己的问题。

事实证明，这确实是firefox中的一个bug。当 Firefox 中的选择元素被标记为可编辑时，它不会触发事件。我能够通过以下方式解决此问题。

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');
});

其中 addEvent 在自定义插件中定义为

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;