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，給我“真實”頁面的工作按鈕。

這有點像黑客，但它有效 =)