Question: I'm using CLEditor text editor and suddenly I see that there is no fullscreen mode (something like wordpress does with the acclaimed "Distraction Mode"). I'm trying to build a fullscreen mode on my own (call me crazy whatever) with basic Javascript. So far I got the text editor on place where it should be. When I click on fullscreen mode it grabs the CLEditor container div and put it on another div which has some styles to fill all browser window and leave the rest behind. It works, sort of (with some bugs in the middle), but I can't type in the editor - at least until I resize the browser window. It seems like the editor needs some "Hello" shaking to start working again. It seems that it needs maybe an "update" through Javascript or jQuery, I don't know.

Can anyone help?

Best Regards,
Tiago Castro

Answer: 
For this I wrote plugin **jquery.cleditor.fullscreen.js** (place in the same location as **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);

```

In cleditor **images** folder I put **fullscreen.gif** ![icon for Fullscreen button](https://i.stack.imgur.com/9QZN9.gif).
Than add this plugin in **head** section in my **html** after **jquery.cleditor.js**.
if you do this:

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

```

you might want to do this:

```
textEditor.editor.refresh();

```

it works for me.. :)