javascript - CKEditor 4 Inline: How to hide toolbar on demand? - Stack Overflow

admin管理员组

文章数量:1291119

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 mand(such as user press a shortcut).

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

Any ideas on how to achieve this? Many thanks.

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 mand(such as user press a shortcut).

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

Any ideas on how to achieve this? Many thanks.

• javascript
• ckeditor

Share Improve this question Follow asked Apr 8, 2013 at 11:31 MikeMike 3,5751111 gold badges4747 silver badges7070 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

did you try to do jQuery Show when the focus es 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();
     }

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()
            }
        }
    }

本文标签： javascriptCKEditor 4 Inline How to hide toolbar on demandStack Overflow