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

【问题标题】：CLEditor text editor on fullscreen mode全屏模式下的 CLEditor 文本编辑器
【发布时间】：2012-05-18 12:29:53
【问题描述】：

我正在使用 CLEditor 文本编辑器，突然我发现没有全屏模式（就像 wordpress 对广受好评的“分心模式”所做的那样）。我正在尝试使用基本的 Javascript 自己构建全屏模式（无论如何都称我为疯狂）。到目前为止，我把文本编辑器放在了它应该在的地方。当我单击全屏模式时，它会抓取 CLEditor 容器 div 并将其放在另一个 div 上，该 div 具有一些样式来填充所有浏览器窗口并将其余部分留在后面。它可以工作，有点（中间有一些错误），但我无法在编辑器中输入 - 至少在我调整浏览器窗口大小之前。编辑器似乎需要一些“你好”的摇晃才能重新开始工作。似乎它可能需要通过 Javascript 或 jQuery 进行“更新”，我不知道。

谁能帮忙？

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

【问题讨论】：

标签： javascript jquery html text editor

【解决方案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 images 文件夹中，我放了 fullscreen.gif 。比在 jquery.cleditor.js 之后的 html 的 head 部分添加这个插件。

【讨论】：

它似乎不会仅调整主窗口的基础文本区域的大小。可能还需要编辑 iframe 样式。我还认为您有一些语法错误，例如函数定义后的分号、else 块后的额外分号以及全屏按钮定义中的额外逗号。

【解决方案2】：

我有同样的需求，我已经跟进@verybadbug 的回答，并修复了 JS。这已经过测试并按要求工作。关键确实是让iframe适配，调用插件提供的refresh(editor)函数。

(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】：

如果你这样做：

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

你可能想这样做：

textEditor.editor.refresh();

它对我有用.. :)

【讨论】：

"with basic Javascript"，你的答案在 jQuery 中