Вопрос по jquery, html, text, javascript – CLEditor текстовый редактор в полноэкранном режиме

0

Я использую текстовый редактор CLEditor и внезапно вижу, что полноэкранного режима нет (что-то вроде Wordpress делает с приветствуемым «Режимом отвлечения»). Я пытаюсь создать полноэкранный режим самостоятельно (называть меня сумасшедшим) с помощью базового Javascript. До сих пор я получил текстовый редактор на месте, где он должен быть. Когда я нажимаю на полноэкранный режим, он берет контейнер div CLEditor и помещает его в другой div, который имеет несколько стилей, чтобы заполнить все окна браузера и оставить остальные. Это работает, вроде (с некоторыми ошибками в середине), но я не могу набирать текст в редакторе - по крайней мере, пока не изменю размер окна браузера. Похоже, что редактору нужен какой-то & quot; Hello & quot; встряхивая, чтобы начать работать снова. Похоже, что это, возможно, нуждается в "обновлении" через Javascript или jQuery, я не знаю.

Кто-нибудь может помочь?

С уважением, Тьяго Кастро

Ваш Ответ

3   ответа
0

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

Вы можете сделать это:

textEditor.editor.refresh();

меня устраивает.. :)

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
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);

В кредитореimages папку я положилfullscreen.gif icon for Fullscreen button. Than add this plugin in head раздел в моемhtml послеjquery.cleditor.js.

Error: User Rate Limit Exceeded
1

я следил за ответом @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);

Похожие вопросы