CKEditor 4 en ligne: Comment masquer la barre d'outils de la demande?

Normalement, lorsque vous cliquez sur un autre endroit dans la page autre que la zone d'édition, la barre d'outils se cacher, maintenant j'ai besoin de masquer la barre d'outils aussi sur commande de l'utilisateur(telles que l'utilisateur appuie sur un raccourci).

J'ai essayé d'appeler jQuery hide méthode sur ckeditor barre d'outils de la div, mais une fois caché, il ne sera jamais visible, même lorsque l'utilisateur se concentrer sur la zone d'édition.

Des idées sur la façon de réaliser cet objectif? Merci beaucoup.

OriginalL'auteur Mike | 2013-04-08

  1. 4

    avez-vous essayer de faire jQuery Afficher lorsque le focus revient dans la zone d'édition?

    vous pouvez également joindre à la focus et blur événements pour afficher et masquer la barre d'outils:

    //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();
     }
    qui fonctionne, je vous remercie.
    Les sélecteurs jQuery ne fonctionne pas pour moi. J'ai eu à utiliser $(evt.editor.element.$).find('span.cke_top').show();. Vous pouvez également obtenir le pied de page en utilisant find('span.cke_bottom').
    Vous pouvez aussi avoir la CKEditor chargement avec la barre d'outils cachés en vous abonnant à la contentDom de l'événement et de l'appel de hideToolBarDiv à partir de là.

    OriginalL'auteur Wasif.Butt

  2. 2

    où vous créer une instance de ckedito utilisez code ci-dessous.
    de l'éditeur.nom de l'utiliser pour les trois partie de ckeditor, la barre d'outils de la zone de montage, le pied de page
    par exemple, si l'éditeur.id ont 'cke_12 valeur de la barre d'outils div id est 'cke_12_top'.
    remarque c'est pour iframe mode.

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

    OriginalL'auteur sajjad