CLEditor text editor on fullscreen mode

问题

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

回答1:

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

. Than add this plugin in head section in my html after jquery.cleditor.js.

回答2:

I had the same need, I have followed up on @verybadbug 's answer, and fixed the JS. This has been tested and works as requested. The key was indeed to make the iframe adapt, and to call the refresh(editor) function provided by the plugin.

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

回答3:

if you do this:

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

you might want to do this:

textEditor.editor.refresh();

it works for me.. :)

来源：https://stackoverflow.com/questions/10525448/cleditor-text-editor-on-fullscreen-mode

标签

javascript

jquery

html

text

editor