使用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和模式更改时重置监听器事件

回答

相关问题