CKEditor 4 Inline: How to hide toolbar on demand?

Question

Normally when you click other place in the page other than the edit area, the toolbar will hide, now i need to hide the toolbar also on user command(such as user press a shortcut).

I tried to call jQuery hide method on ckeditor toolbar div, but once hidden, it will never become visible even when user focus on the edit area.

Any ideas on how to achieve this? Many thanks.

Answer 1

did you try to do jQuery Show when the focus comes back in to the edit area?

you can also attach to the focus and blur events to show and hide toolbar:

// Call showToolBarDiv() when editor get the focus
    editor.on('focus', function (event)
    {
               showToolBarDiv( event );
     });
    // Call hideToolBarDiv() when editor loses the focus
    editor.on('blur', function (event)
    {
               hideToolBarDiv( event );
    });


    //Whenever CKEditor get focus. We will show the toolbar DIV.
     function showToolBarDiv( event )
     {
      // Select the correct toolbar DIV and show it.
      //'event.editor.name' returns the name of the DIV receiving focus.
        $('#'+event.editor.name+'TBdiv').show();
     }

     //Whenever CKEditor loses focus, We will hide the corresponding toolbar DIV.
     function hideToolBarDiv( event )
     {
        // Select the correct toolbar DIV and hide it.
        //'event.editor.name' returns the name of the DIV receiving focus.
        $('#'+event.editor.name+'TBdiv').hide();
     }

Answer 2

where you create instance of ckedito use below code. editor.id use for three part of ckeditor, toolbar,edit area, footer for example if editor.id have 'cke_12' value for toolbar div id is 'cke_12_top'. note this is for iframe mode.

CKEDITOR.replace(divId, {toolbar: [
         { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
        {name: 'editing', items: ['Format', 'Font', 'FontSize', 'TextColor', 'BGColor' , 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] }
    ]});


//use for loop because i have multi ckeditor in page.
    for (instance in CKEDITOR.instances) {
        var editor = CKEDITOR.instances[instance];
        if (editor) {
            // Call showToolBarDiv() when editor get the focus
            editor.on('focus', function (event) {
                showToolBarDiv(event);
            });

            // Call hideToolBarDiv() when editor loses the focus
            editor.on('blur', function (event) {
                hideToolBarDiv(event);
            });

            //Whenever CKEditor get focus. We will show the toolbar span.
            function showToolBarDiv(event) {
                //'event.editor.id' returns the id of the spans used in ckeditr.
                $('#'+event.editor.id+'_top').show();
            }

            function hideToolBarDiv(event) {                    
                //'event.editor.id' returns the id of the spans used in ckeditr.
                $('#'+event.editor.id+'_top').hide()
            }
        }
    }