Search code examples
javascriptckeditorckeditor4.x

How to disable auto hide/show toolbar in CKEDITOR inline


CKEDITOR inline shows/hide the toolbar when focusing or blurring the DOM element with content contenteditable="true".

For example if a user click on a background of the page, CKEDITOR hide the toolbar.

I need instead show always the toolbar and disable any auto show/hide feature.

Any way how to achieve it?

http://jsfiddle.net/vdRYL/28/

<script src="//cdn.ckeditor.com/4.5.3/standard/ckeditor.js"></script>
Default behaviour: 
<div id="first" contenteditable="true">Click me</div>
<br>

I have tried

CKEDITOR.inline(this._cloneDom.id, { startupFocus: false });

but with no success


Solution

  • Here is what I did and it seem to be working:

    // in config I have set the recommended value:
    config.startupFocus = true;
    
    // load the editor
    var instance = CKEDITOR.inline(element.id, {
        // ... load config
    });
    
    // this works to prevent hiding of the editor, I don't know yet if this breaks anything, 
    // but seems to be working fine
    instance.on('blur',function(){
       return false;
    });
    
    
    // and because the startupFocus property triggers focus on each element that has the editor
    // I scroll the document to the top on the event when editor is ready
    instance.on("instanceReady", function(){
         document.body.scrollTop = document.documentElement.scrollTop = 0;
    });