在TinyMCE 4.x中,如何将click事件处理程序附加到内容?

时间:2013-07-25 10:33:26

标签: tinymce tinymce-4

我一直在努力将点击事件处理程序附加到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!');
});

2 个答案:

答案 0 :(得分:3)

使用jQuery可能会有所帮助:

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

答案 1 :(得分:2)

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

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

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;