CKEditor 4 Inline: Wie kann man die Symbolleiste bei Bedarf ausblenden?

Question

Normalerweise, wenn Sie auf einen anderen Platz auf der Seite als den Bearbeitungsbereich klicken, wird die Symbolleiste ausgeblendet, jetzt muss ich die Symbolleiste auch auf Benutzerbefehl ausblenden (z. B. Benutzer drücken Sie eine Verknüpfung).

Ich habe versucht, jQuery hide Methode auf ckeditor Symbolleiste div, aber einmal ausgeblendet, wird es nie sichtbar, auch wenn Benutzer Fokus auf den Bearbeitungsbereich.

Irgendwelche Ideen, wie man das erreicht? Danke vielmals.

Answer 1

Haben Sie versucht, jQuery Show auszuführen, wenn der Fokus wieder im Bearbeitungsbereich angezeigt wird?

Sie können auch auf den Fokus legen und Unschärfe Ereignisse Symbolleiste ein- und ausblenden:

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

wo Sie Instanz ckedito Verwendung unter Code erstellen. editor.id verwenden für drei Teile von ckeditor, Symbolleiste, Edit-Bereich, Fußzeile zum Beispiel, wenn editor.id 'cke_12' Wert für Toolbar Div-ID ist 'cke_12_top'. Beachten Sie, dass dies für den iframe-Modus gilt.

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