使用CKEditor在setData和模式更改時重置監聽器事件

每當我的腳本調用setData或更改模式（「源」，「所見即所得」）時，不再調用我分配的事件的監聽器。使用CKEditor在setData和模式更改時重置監聽器事件

研究告訴我爲什麼，我一直在建議的解決方案（CKEDITOR.setData prevents attaching of events with .on function），包括來自官方文檔（http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-contentDom）的實驗，但沒有決議爲我工作的記錄，我不知道爲什麼。

這裏有其他人設法解決這個問題嗎？如果是這樣，我將非常感謝，以瞭解如何。

我們是CKEditor當前運行的版本4.5.10。

感謝您的期待。 Ken。

例子：

// Works until setData() is called or until the view mode is changed ("WYSIWYG", "SOURCE). 

ev.editor.document.on('keydown', function(evt) 
{ 
    console.log("Key Down"); 
}); 

// This appears to be the recommended resolution however, this does not 
    // work for me even prior to setData() being called of the view mode being changed. 

    editor.on('contentDom', function() { 
    var editable = editor.editable(); 

    editable.attachListener(editor.document, 'keydown', function() { 
    console.log("Key Down"); // Never executed 
     }); 
    });

UPDATE：該解決方案（由德克爾建議）在我看來，它應該工作。但是，我懷疑我沒有正確實現它，因此按下按鍵事件不會觸發。對此有任何想法：

for (var i in CKEDITOR.instances) { 
    CKEDITOR.instances[i].on('contentDom', function() { 
     CKEDITOR.instances[i].document.on('keydown', function(event) { 
      console.log('key down') 
     }); 
    }); 
}

更新：完整的代碼示例。該事件不再發生：

<html> 

<textarea name="editor1"> 
</textarea> 

<textarea name="editor2"> 
</textarea> 

<textarea name="editor3"> 
</textarea> 

</html> 

<script> 

CKEDITOR.replace('editor1', { 
    allowedContent: true 
}); 

CKEDITOR.replace('editor2', { 
    allowedContent: true 
}); 

CKEDITOR.replace('editor3', { 
    allowedContent: true 
}); 

for (var i in CKEDITOR.instances) { 
    CKEDITOR.instances[i].on('contentDom', function() { 
     CKEDITOR.instances[i].document.on('keydown', function(event) { 
      console.log('key down') 
     }); 
    }); 
} 

</script>

來源

2016-09-21 Ken Haynes

添加一個例子... – Dekel

//工作直到使用setData（）被調用，或直到視圖模式被改變（「所見即所得」，「SOURCE）。 ev.editor.document.on（ 'KEYDOWN' ，功能（EVT） { 的console.log（「鍵按下」）; }）; //這似乎是推薦分辨率然而，這並不 //工作對我來說，即使之前使用setData（）被稱爲正在改變的視圖模式。 editor.on（ 'contentDom'，函數（）{ 變種可編輯= editor.editable（）; editable.attachListener（editor.document， 'KEYDOWN'，函數（）{ 的console.log（「鍵按下「）; //永不執行 }）; }）; –

格式的道歉。我剛來這地方。我將如何着手在示例中獲取換行符？ –

花了一些時間瞭解問題所在，但我認爲這是您正在尋找的解決方案。

每當DOM準備就緒時，您需要附加事件。爲此 - 您需要聽取編輯器的contentDom事件，然後在編輯器的文檔上註冊事件。

CKEDITOR.instances.editor1.on('contentDom', function() { 
    CKEDITOR.instances.editor1.document.on('keydown', function(event) { 
     console.log('key down') 
    }); 
});

在這個例子 - editor1是CKEditor的實例的名稱。

您可以檢查此工作示例：
https://jsfiddle.net/gad701dc/

如果您有您需要遍歷他們並將其添加到他們每個人的多個實例：

for (var i in CKEDITOR.instances) { 
    CKEDITOR.instances[i].on('contentDom', function() { 
     // The variable *this* here refers to the current instance of the ckeditor 
     this.document.on('keydown', function(event) { 
      console.log('key down') 
     }); 
    }); 
}

您需要訪問相關編輯器，您應該使用this而不是CKEDITOR.instances[i]，因爲i變量會在之前更改將調用回調函數。

來源

2016-09-22 14:05:02 Dekel

出色的工作示例，謝謝。有多個編輯器實例正在使用中，我通常使用CKEDITOR.currentInstance。但是，這現在顯示爲未定義。我曾嘗試將代碼添加到instanceReady事件，但currentInstance仍顯示爲未定義。對此有何想法？ –

更新了答案，檢查加到底 – Dekel

謝謝德克爾。我很欣賞快速反應。我通過我原來的帖子回覆。 –

使用CKEditor在setData和模式更改時重置監聽器事件

回答

相關問題