Javascript 在 ckeditor 中为按键事件监听器添加代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6386423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add code for event listener for keypress in ckeditor
提问by ghostCoder
I need to add an event listener for keypress after the CKEditor is loaded.
The code is something like:
加载 CKEditor 后，我需要为按键添加一个事件侦听器。代码是这样的：
CKEDITOR.instances.editor1.document.on('key', function(event) {
/* instructions */
});
Any idea where can I add the code for that? In which file or in what way?
知道在哪里可以添加代码吗？在哪个文件中或以什么方式？
回答by Zee
Code to archive it is something like this:
归档它的代码是这样的：
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
}
);
});
});
Edit - 2014 - Since this answer is still getting some upvotes, i felt it would be fair to point out, that it was meant for CKEditor in version 3.x. With the version 4.x there is a change event, which will trigger not only on key events but also after pasting, undo, redo etc.
编辑 - 2014 - 由于这个答案仍然得到一些赞成，我觉得应该公平地指出，它适用于 3.x 版中的 CKEditor。4.x 版本有一个更改事件，它不仅会在关键事件上触发，还会在粘贴、撤消、重做等之后触发。
In code its something like this:
在代码中它是这样的：
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('change', function (event) {
// change event in CKEditor 4.x
});
});
回答by Chris
Do you need to track changes?
您需要跟踪更改吗？
I was originally using the solution above, but I ended up replacing it with the OnChange CKEditor plugin. This is useful in some special cases - for example, if you add a link using the toolbar, keypress won't register anything.
我最初使用上面的解决方案，但我最终用OnChange CKEditor 插件替换了它。这在某些特殊情况下很有用 - 例如，如果您使用工具栏添加链接，按键将不会注册任何内容。
Here's a code example, updated to use instanceCreated (install OnChange first):
这是一个代码示例，已更新为使用 instanceCreated（首先安装 OnChange）：
CKEDITOR.on('instanceCreated', function(e) {
if (e.editor.name === editorId) { //editorId is the id of the textarea
e.editor.on('change', function(evt) {
//Text change code
});
}
});
Update: According to the answer above, CKEditor now has a built-in change event, so you don't have to install the plugin to use this solution anymore. You can still use the second line of code to apply the change to the instance of CKEditor you want to edit.
更新：根据上面的答案，CKEditor 现在有一个内置的更改事件，因此您不必再安装插件即可使用此解决方案。您仍然可以使用第二行代码将更改应用到您要编辑的 CKEditor 实例。
回答by sealocal
If the keydown logic makes sense for a given plugin, you can include it in the plugin's definition:
如果 keydown 逻辑对给定的插件有意义，您可以将其包含在插件的定义中：
CKEDITOR.plugins.add('customPlugin', {
// definition keys...
init: function( editor ) {
// Plugin logic
...
// Register a keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
editor.on('key', function(event) {
console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin
}
});
回答by Gabriel
I've tested some of the solutions proposed here and I got my anwser when I found this link: http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html
我已经测试了这里提出的一些解决方案，当我找到这个链接时我得到了我的答案：http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html
The following code worked like a charm:
下面的代码就像一个魅力：
editor.on('contentDom', function()
{
editor.document.on('keydown', function( event )
{
if ( !event.data.$.ctrlKey && !event.data.$.metaKey )
somethingChanged();
});
});
回答by Shahvez Akhtar
CKEDITOR.instances.editor1.on('change', function () { //Do something here.});
This code registers any change event including copy-paste.
此代码注册任何更改事件，包括复制粘贴。
回答by AlfonsoML
You add that code in your page, or in a .js file included in your page. There is no mystery about that code.
您可以在页面中或页面中包含的 .js 文件中添加该代码。这段代码没有什么神秘之处。
