ckeditor 全局事件未在内联编辑器上触发答案

【问题标题】：ckeditor global events not firing on inline editorsckeditor 全局事件未在内联编辑器上触发
【发布时间】：2017-05-24 00:18:23
【问题描述】：

我一直在查看一些关于如何保存内联内容的 other questions。由此，我读到以下所有内容都应该可以检测焦点/模糊变化：

CKEDITOR.on("blur", function(e) {
    console.log("The editor named " + e.editor.name + " BLUR")
})
CKEDITOR.on("focus", function(e) {
    console.log("The editor named " + e.editor.name + " FOCUS")
})
CKEDITOR.on("instanceReady", function(evt) {
    var editor = evt.editor
    console.log("The editor named " + editor.name + " is now ready")

    editor.on("focus", function(e) {
        console.log("The editor named " + e.editor.name + " is now focused")
    })
    editor.on("blur", function(e) {
        console.log("The editor named " + e.editor.name + " is now focused")
    })
})

我在将 DIV 元素添加到页面之前调用这些函数。（虽然为了更好的衡量，我也尝试在将 DIV 元素添加到页面之后调用这些，但行为没有任何变化。）我已将 DIV 元素全部设置为contenteditable=true。当我点击其中任何一个时，我在点击的点上会看到一个闪烁的光标，我可以编辑 DIV 的内容。当我点击其他地方时，光标消失，表示焦点已丢失。

但是，我的上述函数都没有被调用。我应该如何检测其中一个内联编辑器何时获得和失去焦点？

我查看了API，实际上并没有看到on 是全局CKEDITOR 单例的方法，所以我不确定这应该如何工作。不过方法肯定是有的。

更新：我尝试使用不同的 ckeditor（https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.7/ckeditor.js，而不是我为我的网站构建和下载的版本）并且 该版本 可以工作但仅适用于 instanceReady 事件时间>。我使用与我的网站上相同的版本number，但我确定我没有使用所有相同的插件构建，因此我怀疑必须有插件有问题。

我还注意到，即使我的 div 上有 contenteditable=true，当我选择它并且它变为活动状态时，该元素实际上并没有改变任何东西，也就是说，CKEDITOR 似乎没有用任何东西来替换它进行编辑。这可以解释为什么模糊和焦点事件没有触发，但为什么 CKEDITOR 没有控制？

【问题讨论】：

标签： javascript ckeditor editor

【解决方案1】：

CKEditor 加载后创建的元素不会自动使用它。必须调用 inlineAll 函数。文档通过说“将 contenteditable 属性设置为 true 的 DOM 元素转换为 CKEditor 实例”来描述此功能。这让我很困惑，因为我在想我不希望元素成为真正的 CKEditor 实例，直到它被点击。但是，这并不是说将启动编辑会话，只是将其设置为可被 CKEditor 编辑。

如果存在任何其他 CKEditor，则必须先将其删除，否则 inlineAll 将失败。所以下面的代码会去掉所有的存在，然后重新创建它们：

for (i in CKEDITOR.instances) { 
    CKEDITOR.instances[i].destroy()
}
CKEDITOR.inlineAll()

【讨论】：