Question

我正在尝试切换焦点上的CKEDITOR实例的工具栏。模糊： -

newEditor.on('focus',collapseTheToolbar);
newEditor.on('blur',collapseTheToolbar);
function collapseTheToolbar(event){
   event.editor.execCommand('toolbarCollapse'); //this command brings the focus back to the editor on blur also.
}

除了jQuery（切换页面上的所有ckeditor实例）之外，还有其他方法可以切换CKEDITOR实例的工具栏吗？

Answer 1

toolbarCollapse命令实现没有定义editorFocus属性，这意味着每次执行时都需要编辑器焦点。

没关系，因为它不会破坏编辑体验（类型，单击按钮折叠，键入更多，因为可编辑区域仍然聚焦）。但是，由于您以编程方式执行命令的情况不同，您可以在执行之前暂时禁用editorFocus属性，然后在完成后将其还原（以保留编辑UX）：

var editor = CKEDITOR.instances.editor;
var collapseCommand = editor.getCommand( 'toolbarCollapse' );

editor.on( 'focus', collapseTheToolbar );
editor.on( 'blur', collapseTheToolbar );

function collapseTheToolbar( evt ){
    collapseCommand.editorFocus = false;
    editor.execCommand( 'toolbarCollapse' );
    collapseCommand.editorFocus = true;
}

Answer 2

我发现了一种在焦点/模糊上切换CKEDITOR工具栏的方法。但是，这种方法与Oleq的区别在于，此代码将隐藏工具栏上的焦点/模糊，而Oleq的代码将折叠工具栏

var newEditor = CKEDITOR.instances[id];
newEditor.on('focus',showToolbar);
newEditor.on('blur',hideToolbar);

function showToolbar(event){
    document.getElementById(event.editor.id + '_top').style.display = 'block';
}

function hideToolbar(event){
    document.getElementById(event.editor.id + '_top').style.display = 'none';
}

这种方法的好处是我们不必担心编辑重新聚焦。另外，为确保有效工作，请将以下内容添加到编辑器实例的配置中：

newEditor.config.toolbarCanCollapse = false;

这将隐藏工具栏上的折叠按钮。否则，如果工具栏被错误折叠，折叠栏将出现＆amp;在焦点/模糊时消失。

此外，如果将newEditor.config.toolbarLocation设置为top＆amp;不是底部。如果您选择将工具栏放在底部，请相应地调整代码。

toolbarCollapse命令使CKEDITOR成为焦点

2 个答案: