2013-04-08 15 views
5

Zwykle po kliknięciu w inne miejsce na stronie inne niż obszar edycji, pasek narzędzi zostanie ukryty, teraz muszę ukryć pasek narzędzi również na polecenie użytkownika (np. Użytkownik nacisnąć skrót).CKEditor 4 Inline: jak ukryć pasek narzędzi na żądanie?

Próbowałem wywołać metodę jQuery hide na pasku narzędziowym programu narzędziowego ckeditor, ale po ukryciu nigdy nie stanie się ona widoczna, nawet jeśli użytkownik ustawi ostrość w obszarze edycji.

Jakieś pomysły, jak to osiągnąć? Wielkie dzięki.

Odpowiedz

4

czy próbowałeś zrobić program jQuery Show, gdy ostrość powraca do obszaru edycji?

można również dołączyć do ostrości i rozmycia wydarzeń, aby pokazać i ukryć pasek narzędzi:

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

który działa, dziękuję. – Mike

+0

Selektory jQuery nie działały dla mnie. Musiałem użyć '$ (evt.editor.element. $). Find ('span.cke_top'). Show();'. Stopkę można również uzyskać za pomocą 'find ('span.cke_bottom')'. – Nathan

+0

Możesz także załadować CKEditor z ukrytym paskiem narzędzi, subskrybując wydarzenie 'contentDom' i wywołując' hideToolBarDiv' stamtąd. – Nathan

2

gdzie utworzyć instancję użytku ckedito poniżej kodu. use editor.id dla trzech części cedenta, paska narzędzi, obszaru edycji, stopka na przykład, jeśli editor.id ma wartość "cke_12" dla div paska narzędzi to "cke_12_top". należy pamiętać, że jest to tryb 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() 
      } 
     } 
    } 
Powiązane problemy