在ckeditor中插入html按钮的onclick事件

时间:2015-11-04 12:17:17

标签: javascript javascript-events ckeditor

我正在为ckeditor编写一个插件,它会在内容中添加s,但是我遇到了onclick的问题,因为它与ckeditor的功能冲突。

如果我使用

注册onclick
commit: function( element ) {
    element.setAttribute( 'onclick' , 'window.location=\'' + this.getValue() + '\'');
}

在我的对话框中,单击该按钮不会打开我的插件的编辑元素对话框,而是将我发送到按钮onck的目标。

有什么方法吗?

1 个答案:

答案 0 :(得分:2)

经过大量的摆弄后我得出结论,我不可能按照我想要的方式使用自定义onclicks。相反,我设计了以下解决方法,因为我真的只对从editor.getData()返回的数据感兴趣是正确的:

而不是在对话框中注册这样的onclick

element.setAttribute( 'onclick' , 'window.location=\'' + this.getValue() + '\'');

我为location.href

创建了自定义数据属性
element.setAttribute( 'data-custom-click' , 'location.href=\'' + this.getValue() + '\'');

然后,在创建按钮并注册上述对话框的插件的init中,我注册了两个事件处理程序

editor.on('getData', function(e) {
    e.data.dataValue = e.data.dataValue.replace(' data-custom-click=', ' onclick=');
});

editor.on('setData', function(e) {
    e.data.dataValue = e.data.dataValue.replace(' onclick=',' data-custom-click=');
});
根据文件

getData被解雇了

  

在getData调用返回之前,允许进行额外的操作。

另一方面,

setData会触发

  

在执行setData调用之前,允许进行额外的操作。

因此,任何带有这些事件处理程序的编辑器都会在加载html时将onclick转换为data-custom-click,从而在编辑时使我的按钮安全,并在调用editor.getData()时将任何数据转换为onclick。给我工作按钮的真实"页。

这是一种黑客攻击,但它的工作原理=)