Éditeur de texte CLEditor en mode plein écran

J’utilise l’éditeur de texte CLEditor et tout à coup je vois qu’il n’y a pas de mode plein écran (comme WordPress le fait avec le célèbre “mode de distraction”). J’essaie de créer moi-même un mode plein écran (appelez-moi fou, peu importe) avec du Javascript de base. Jusqu’ici, j’ai mis l’éditeur de texte à l’endroit où il devrait être. Lorsque je clique sur le mode plein écran, il saisit le div de conteneur CLEditor et le place sur un autre div qui a certains styles pour remplir toutes les fenêtres du navigateur et laisser le rest derrière. Cela fonctionne, en quelque sorte (avec quelques bugs au milieu), mais je ne peux pas taper dans l’éditeur – du moins jusqu’à ce que je redimensionne la fenêtre du navigateur. Il semble que l’éditeur a besoin de secouer “Bonjour” pour recommencer à travailler. Il semble que cela nécessite peut-être une “mise à jour” via Javascript ou jQuery, je ne sais pas.

Quelqu’un peut-il aider?

Cordialement, Tiago Castro

Pour cela j’ai écrit le plugin jquery.cleditor.fullscreen.js (place au même endroit que jquery.cleditor.js )

(function($) { //Style for fullscreen mode var fullscreen = 'height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999;', style = ''; // Define the fullscreen button $.cleditor.buttons.fullscreen = { name: 'fullscreen', image: 'fullscreen.gif', title: 'Fullscreen', command: '', popupName: '', popupClass: '', popupContent: '', getPressed: fullscreenGetPressed, buttonClick: fullscreenButtonClick, }; // Add the button to the default controls before the bold button $.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls.replace("bold", "fullscreen | bold"); function fullscreenGetPressed(data) { return data.editor.$main.hasClass('fullscreen'); }; function fullscreenButtonClick(e, data) { var main = data.editor.$main; if (main.hasClass('fullscreen')) main.attr('style', style).removeClass('fullscreen'); else { style = main.attr('style'); main.attr('style', fullscreen).addClass('fullscreen'); }; editor.focus(); return false; } })(jQuery);

Dans le dossier des images du rédacteur, je mets fullscreen.gif icône du bouton plein écran . Puis ajoutez ce plugin dans la section head de mon html après jquery.cleditor.js .

J’ai eu le même besoin, j’ai donné suite à la réponse de @verybadbug et corrigé le JS. Cela a été testé et fonctionne comme demandé. La clé consistait en effet à adapter l’iframe et à appeler la fonction de rafraîchissement (éditeur) fournie par le plug-in.

 (function($) { //Style for fullscreen mode var fullscreen = 'display:block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999;', fullscreenIframe = 'height: 100%; width: 100%;', style = ''; // Define the fullscreen button $.cleditor.buttons.fullscreen = { name: 'fullscreen', image: 'fullscreen.gif', title: 'Fullscreen', command: '', popupName: '', popupClass: '', popupContent: '', getPressed: fullscreenGetPressed, buttonClick: fullscreenButtonClick, }; // Add the button to the default controls before the bold button $.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls.replace("bold", "fullscreen | bold"); function fullscreenGetPressed(data) { return data.editor.$main.hasClass('fullscreen'); }; function fullscreenButtonClick(e, data) { var main = data.editor.$main; var iframe = data.editor.$frame; if (main.hasClass('fullscreen')) { main.attr('style', style).removeClass('fullscreen'); } else { style = main.attr('style'); main.attr('style', fullscreen).addClass('fullscreen'); iframe.attr('style', fullscreenIframe).removeClass('fullscreen'); }; editor.refresh(data.editor); editor.focus(); return false; } })(jQuery);

Si tu fais ça:

 $('#cleditor_max_container').append(textEditor.editor.$main);

vous voudrez peut-être faire ceci:

 textEditor.editor.refresh();

ça marche pour moi.. 🙂