Question

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

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

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

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具有'cke_12'值，则工具栏div id为'cke_12_top'。请注意，这适用于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()
            }
        }
    }

CKEditor 4内联：如何按需隐藏工具栏？

2 个答案: