javascript - CKEditor 4 Inline：如何按需隐藏工具栏？

Question

通常，当您单击页面中编辑区域以外的其他位置时，工具栏会隐藏，现在我需要在用户命令（例如用户按下快捷方式）时隐藏工具栏。

我尝试hide在ckeditor工具栏div上调用jQuery方法，但是一旦隐藏，即使用户专注于编辑区域，它也永远不会变得可见。

关于如何实现这一目标的任何想法？非常感谢。

Answer 1

当焦点回到编辑区域时，您是否尝试过执行 jQuery Show？

您还可以附加到焦点和模糊事件以显示和隐藏工具栏：

// 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

在其中创建 ckedito 的实例使用下面的代码。editor.id 用于 ckeditor、工具栏、编辑区域、页脚的三个部分，例如，如果 editor.id 的工具栏 div id 为 'cke_12_top' 的值为 'cke_12'。请注意，这是针对 iframe 模式的。

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