Support Fullscreen mode + button to enter Fullscreen mode #36

pixeline · 2013-12-26T13:04:11Z

Just to let anybody in the need of a "fullscreen" button know that i've successfully managed to have one working. Code and explanations are here: http://stackoverflow.com/questions/10525448/cleditor-text-editor-on-fullscreen-mode

Pasted in-line here:

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

jzabroski changed the title ~~Code for a Fullscreen button.~~ Support Fullscreen mode + button to enter Fullscreen mode Mar 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Support Fullscreen mode + button to enter Fullscreen mode #36

Support Fullscreen mode + button to enter Fullscreen mode #36

Support Fullscreen mode + button to enter Fullscreen mode #36

Support Fullscreen mode + button to enter Fullscreen mode #36

Comments

Uh oh!