拦截CKEditor击键

Question

我可以拦截CKEditor中的按键（tab键）并替换默认行为吗？我想要tab键插入带有空白的div。

Answer 1

this.editorInstance.on('tab', function(evt){ 

    evt.editor.insertHtml('span style="margin-left: 40px;">&nbsp;</span>'); 

    evt.cancel(); 
    return false; 
}) 

Answer 2

我解决了这个稍微不同的方式。我不想插入固定宽度的跨度，而是希望标签在所有行上排列。所以，我用'pre'格式插入一个制表符（&＃0 9）。我也遇到了insertHtml（）方面的困难，不得不使用createFromHtml（）和insertElement（）的组合。

这里是我的解决方案：

// my editor's id is 'summary' 
CKEDITOR.replace('summary', { ... }); 

var editor = CKEDITOR.instances.summary; 
editor.on('key', function(ev) { 
    if (ev.data.keyCode == 9) { // TAB 
     var tabHtml = '<span style="white-space:pre">&#09;</span>'; 
     var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document); 
     editor.insertElement(tabElement); 
     ev.cancel(); 
    } 
}); 

Answer 3

我使用的版本4.4.7。至少在这里可以通过编辑config.js来改变TAB击键的行为。使用此代码TAB缩进和SHIFT + TAB替身：

config.keystrokes = 
[ 
    [ 09, 'indent' ], 
    [ CKEDITOR.SHIFT + 09, 'outdent' ] 
];