CKEditor 4インライン：ツールバーをオンデマンドで非表示にするにはどうすればいいですか？

Question

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

ckeditorツールバーのdivでjQuery hideメソッドを呼び出しようとしましたが、一度非表示にすると、ユーザーが編集領域にフォーカスしていても表示されません。

これを達成するためのアイデアはありますか？どうもありがとう。

Answer 1

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

あなたも焦点に添付して、ツールバーを表示し、非表示にするイベントをぼかすことができます。

あなたはコードの下ckedito使用のインスタンスを作成

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

。 editor.id ckeditor、toolbar、edit area、footerの3つの部分に使用 たとえば、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() 
      } 
     } 
    }