javascript - CKEditor 4インライン:オンデマンドでツールバーを非表示にする方法は?

Question

通常、ページ内の編集領域以外の場所をクリックすると、ツールバーが非表示になりますが、ユーザー コマンド (ユーザーがショートカットを押すなど) でもツールバーを非表示にする必要があります。

ckeditor ツールバー div でjQueryhideメソッドを呼び出そうとしましたが、一度非表示にすると、ユーザーが編集領域にフォーカスしても表示されなくなります。

これを達成する方法についてのアイデアはありますか？どうもありがとう。

Answer 1

フォーカスが編集領域に戻ったときに jQuery Show を実行しようとしましたか?

focus および blur イベントにアタッチして、ツールバーを表示および非表示にすることもできます。

// 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、ツールバー、編集領域、フッターの 3 つの部分に使用されます。これは 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()
            }
        }
    }