Question

我正在制作一个笔记记录应用，它使用CKEditor's inline mode来展示动态创建的可编辑div。（我正在使用CKEditor 4.5.8版。）

使用内联编辑器时，您可以从div中单击鼠标离开编辑模式，这会导致以下行为更改：

div周围的蓝色高光消失
闪烁的光标消失
键盘不再“键入”div（即编辑器现在处于非活动状态）。

但我无法弄清楚如何转义编辑器焦点（即重现上述更改）而无需用户物理点击鼠标。这是我到目前为止所尝试的内容：

在内联可编辑元素上调用Jquery .blur()：这会直观地删除焦点，CKEDITOR.currentInstance变为null;但是按键仍会导致字符被添加到div中，从而重新激活焦点。
在内联可编辑元素上调用Jquery .removeClass('cke_focus') - 没有可见效果。
在页面上的其他元素上调用Jquery .click()或.focus() - 没有明显效果。
被叫CKEDITOR.currentInstance.focusManager.blur() - 没有明显效果。
被叫CKEDITOR.currentInstance.container.fire('blur') - 没有明显效果。
被叫CKEDITOR.currentInstance.element.fire('blur') - 没有明显效果。
调用CKEDITOR.currentInstance.destroy() - 由于contenteditable="true"属性或类似内容，编辑器在销毁后会自动重新初始化。无论如何，div保持专注并继续捕捉按键。

我想要的是重新创建当你点击内联编辑div 时发生的事情：焦点指示消失，按键不再向div添加文本。我有什么想法可以做到这一点？提前谢谢！

Answer 1

诀窍是将blur与删除您当前拥有的所有选择范围相结合：

CKEDITOR.instances.editor1.on( 'contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keydown', function(event) {  
        if (event.data.getKey() == 27) {
            $(CKEDITOR.currentInstance.element.$).blur();
            window.getSelection().removeAllRanges();
        }
    });
});

一个有效的例子：
https://jsfiddle.net/bwuhp14s/

CKEditor：通过JS从内联编辑器转义编辑器焦点（无需点击鼠标）？

1 个答案: