2013-04-08 12 views
5

Normalmente quando si fa clic su un altro punto della pagina diverso dall'area di modifica, la barra degli strumenti si nasconde, ora ho bisogno di nascondere la barra degli strumenti anche sul comando dell'utente (come l'utente premere un collegamento).CKEditor 4 Inline: come nascondere la barra degli strumenti su richiesta?

Ho provato a chiamare il metodo jQuery hide sulla barra degli strumenti ckeditor div, ma una volta nascosto, non diventerà mai visibile anche quando l'utente si concentra sull'area di modifica.

Qualche idea su come ottenere questo risultato? Grazie molto.

risposta

4

hai provato a fare jQuery Show quando lo stato attivo torna nell'area di modifica?

è anche possibile allegare alla messa a fuoco e sfocatura eventi da visualizzare e nascondere la barra degli strumenti:

// 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(); 
    } 
+0

che funziona, grazie. – Mike

+0

I selettori jQuery non hanno funzionato per me. Ho dovuto usare '$ (evt.editor.element. $). Find ('span.cke_top'). Show();'. Puoi anche ottenere il piè di pagina usando 'find ('span.cke_bottom')'. – Nathan

+0

È inoltre possibile caricare CKEditor con la barra degli strumenti nascosta sottoscrivendo l'evento 'contentDom' e chiamando' hideToolBarDiv' da lì. – Nathan

2

in cui si crea un'istanza di utilizzo qui di seguito ckedito codice. editor.id utilizzare per tre parti di ckeditor, barra degli strumenti, area di modifica, footer ad esempio se editor.id ha valore 'cke_12' per l'id della barra degli strumenti è 'cke_12_top'. nota questa è per la modalità 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() 
      } 
     } 
    }