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

Question

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

如果我使用以下方法注册onclick ：

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

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

有没有办法解决？

Answer 1

经过大量摆弄之后，我得出结论，不可能按照我想要的方式使用自定义的 onclicks ickeditor。 相反，我设计了以下解决方法，因为我真的只对从 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() 时将任何 data-custom-click 转换回 onclick，给我“真实”页面的工作按钮。

这有点像黑客，但它有效 =)