全屏模式下的CLEditor文本编辑器

Question

我正在使用CLEditor文本编辑器，突然我发现没有全屏模式(就像wordpress对广受好评的“分心模式”所做的那样)。我正试着用基本的Javascript构建一个我自己的全屏模式(叫我疯狂吧)。到目前为止，我把文本编辑器放在了应该放的地方。当我点击全屏模式时，它会抓取CLEditor容器div，并将其放到另一个div中，该div具有一些样式，可以填充所有浏览器窗口，而将其余部分留在后面。它在某种程度上是有效的(中间有一些but )，但我不能在编辑器中输入-至少在我调整浏览器窗口大小之前是这样。编辑器似乎需要一些"Hello“抖动才能重新开始工作。它似乎需要通过Javascript或jQuery进行“更新”，我不知道。

有人能帮上忙吗？

致以最好的问候，蒂亚戈·卡斯特罗

Answer 1

为此，我编写了插件jquery.cleditor.fullscreen.js (放置在与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);

在cleditor 图像文件夹中，我放置了fullscreen.gif

。然后在jquery.cleditor.js.之后将此插件添加到html中的head部分

Answer 2

我也有同样的需求，我跟进了@verybadbug的答案，修复了JS。这是经过测试的，并按要求工作。关键确实是让iframe自适应，并调用插件提供的刷新(编辑器)函数。

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

Answer 3

如果您这样做：

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

您可能需要执行以下操作：

textEditor.editor.refresh();

它对我很有效..:)