Полноэкранный редактор CodeMirror - как добавить пользовательские функции в зеркало кода

Есть хороший пример того, как сделать полноэкранную версию редактора CodeMirror . Однако это не сработает, если виджет CodeMirror находится в середине некоторой другой позиции: абсолютного ​​или относительного div (абсолютное позиционирование виджета CodeMirror не будет относиться ко всему страница больше).

Мы можем добавить новую команду в CodeMirror для перехода в полноэкранный режим:

CodeMirror.commands.fullscreen = function (cm)
{
var fs_p = $(cm.getWrapperElement());

if ( cm._ic3Fullscreen == null) {
    cm._ic3Fullscreen = false;
    cm._ic3container = fs_p.parent();
}

if (!cm._ic3Fullscreen)
{
    fs_p = fs_p.detach();
    fs_p.addClass("CodeMirrorFullscreen");
    fs_p.appendTo("body");
    cm.focus();
    cm._ic3Fullscreen = true;
}
else
{
    fs_p = fs_p.detach();
    fs_p.removeClass("CodeMirrorFullscreen");
    fs_p.appendTo(cm._ic3container);
    cm.focus();
    cm._ic3Fullscreen = false;
}
};

После того, как нам нужно привязать эту новую команду при создании CodeMirror. Добавьте это к параметрам:

extraKeys: {"F11": "fullscreen"}

Вопрос в том, что добавить в класс CSS CodeMirrorFullscreen , чтобы обеспечить работу полноэкранного режима?

6
задан peterflynn 13 May 2013 в 07:20
поделиться