全屏模式下的CLEditor文本编辑器 [英] CLEditor text editor on fullscreen mode

问题描述

我使用的是CLEditor文本编辑器，突然间我发现没有全屏模式（就像wordpress在广受赞誉的Distraction Mode中所做的一样）。我试图用自己的基本Javascript构建一个全屏模式（叫我疯狂）。到目前为止，我已将文本编辑器放置在应该放置的位置。当我点击全屏模式时，它抓住CLEditor容器div并将其放在另一个div上，该div有一些样式来填充所有浏览器窗口，并将其余的放在后面。它的工作方式很简单（中间有些bug），但我无法输入编辑器 - 至少在调整浏览器窗口的大小之前。看起来编辑需要一些你好的震动才能重新开始工作。它似乎需要通过Javascript或jQuery的更新，我不知道。

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.

任何人都可以帮忙吗？

Best Regards，
Tiago Castro

Best Regards, Tiago Castro

推荐答案

我有同样的需求，我跟进了@verybadbug的答案，并修复了JS。这已经过测试并按要求运作。关键是确保iframe适应，并调用插件提供的refresh（编辑器）函数。

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

这篇关于全屏模式下的CLEditor文本编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！