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

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

6 голосов
/ 14 октября 2011

Есть хороший пример того, как сделать полноэкранную версию редактора CodeMirror . Однако это не сработает, если виджет CodeMirror находится в середине некоторого другого position: absolute или relative 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, чтобы обеспечить работу полноэкранного режима?

1 Ответ

1 голос
/ 13 мая 2013

Использование position: fixed вместо absolute должно помочь.

Чтобы проверить это, просто измените CSS демонстрации fullscreen.html CodeMirror следующим образом: 

  form {
    position: relative;
  }
  .CodeMirror-fullscreen {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
  }

(Добавленный селектор form не является частью решения. Он только для того, чтобы убедиться, что мы тестируем случай, который вас интересует - где использование position: absolute в .CodeMirror-fullscreen не работает).

...