ckeditor中插入html按钮的onclick事件

Question

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

如果我注册 onclick 使用：

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

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

有什么解决办法吗？

Answer 1

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

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

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

我为 location.href

创建了自定义数据属性

element.setAttribute( 'data-custom-click' , 'location.href=\'' + this.getValue() + '\'');

然后，在创建按钮和注册上述对话框的插件的初始化中，我注册了两个事件处理程序

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 触发

before the getData call returns, allowing for additional manipulation.

setData，另一方面，火灾

before the setData call is executed, allowing for additional manipulation.

因此，任何具有这些事件处理程序的编辑器都会在加载时将 onclick 转换为数据自定义点击 html，从而在编辑时使我的按钮安全，并在 editor.getData() 被调用，为我提供 "real" 页面的工作按钮。

这有点像 hack，但它确实有效 =)

ckeditor中插入html按钮的onclick事件

Onclick event of inserted html button in ckeditor

javascript

ckeditor

dom-events