0

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

任何人都可以帮忙吗？

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

4

3 回答 3

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部分中添加这个插件。

于 2013-01-28T01:24:17.257 回答
1

我有同样的需求，我跟进了@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);
于 2013-12-26T12:59:27.270 回答
0

如果你这样做：

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

你可能想要这样做：

textEditor.editor.refresh();

这个对我有用.. ：）

于 2012-07-05T00:07:46.337 回答