Question

我正在使用CLEditor文本编辑器，突然之间我发现没有全屏模式（像wordpress一样，广受好评的“分心模式”）。我正在尝试使用基本的Javascript自己构建一个全屏模式（叫我疯了）。到目前为止，我已将文本编辑器放在应有的位置。当我点击全屏模式时，它会抓取CLEditor容器div并将其放在另一个div上，该div具有一些样式以填充所有浏览器窗口并将其余部分留在后面。它的工作方式（中间有一些错误），但我无法输入编辑器 - 至少在我调整浏览器窗口大小之前。看起来编辑需要一些“你好”的摇晃才能重新开始工作。它似乎需要通过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 images 文件夹中，我输入了 fullscreen.gif icon for Fullscreen button 。在 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();

它对我有用.. :)）

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

3 个答案: