CODEWITHSUNDEEP
javascriptckeditor
Shreyansh Gandhi
Shreyansh Gandhi

Reputation: 179

toolbarCollapse command brings CKEDITOR into focus

I'm trying to toggle the toolbar of a CKEDITOR instance on focus & blur:-

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.
}

Is there any other way of toggling the toolbar of a CKEDITOR instance apart from jQuery(which toggles all ckeditor instances on the page)?

Upvotes: 2

Views: 468

Answers (2)

Shreyansh Gandhi
Shreyansh Gandhi

Reputation: 179

I found one more way to toggle the CKEDITOR toolbar on focus/blur. However, the difference between this approach and Oleq's is that this code will hide the toolbar on focus/blur whereas Oleq's code will collapse the toolbar.

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';
}

The good thing about this method is that we don't have to worry about the editor coming back in focus. Also, to make sure this works effectively, add the following to the editor instance's configuration:

newEditor.config.toolbarCanCollapse = false;

This will hide the collapse button on the toolbar. Otherwise, if the toolbar gets collapsed by mistake, the collapsed bar will appear & disappear on focus/blur.

Also, this method works if the newEditor.config.toolbarLocation is set to top & not bottom. Adjust the code accordingly if you choose to place the toolbar at the bottom.

Upvotes: 0

oleq
oleq

Reputation: 15895

The toolbarCollapse command implementation does not define the editorFocus property, which means that it requires editor focus each time it is executed.

It is OK because it does not disrupt the editing experience (type, click button to collapse, type more because the editable area is still focused). However, because your case is different since you execute the command programmatically, you could temporarily disable the editorFocus property before it is executed and then revert it once it's done (to preserve editing 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;
}

Upvotes: 2

Related Questions