Codemirror编辑器全屏 - 如何向代码镜像添加自定义函数

Question

有一个很好的例子,说明如何制作CodeMirror编辑器的全屏版本.但是,如果CodeMirror小部件位于某个其他部分position: absolute或relativediv 的中间,则这不起作用(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"}

问题是如何在CodeMirrorFullscreenCSS类中放置以确保全屏工作？

Answer 1

使用position: fixed代替absolute应该可以解决问题。

要测试它，只需修改CodeMirror的fullscreen.html演示的CSS如下：

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

（添加的form选择器不是解决方案的一部分。它只是为了确保我们正在测试您关心的情况 - 在其中使用position: absolutein.CodeMirror-fullscreen不起作用的情况）。