Codemirror 编辑器全屏 - 如何将自定义功能添加到代码镜像答案

【问题标题】：Codemirror editor fullscreen - how to add custom functions to code mirrorCodemirror 编辑器全屏 - 如何将自定义功能添加到代码镜像
【发布时间】：2013-11-05 04:20:51
【问题描述】：

有一个很好的example of how to make a fullscreen version of the CodeMirror editor。但是，如果 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"}

问题是在CodeMirrorFullscreen CSS 类中添加什么以确保全屏可以正常工作？

【问题讨论】：

“关于如何制作全屏版”——全屏版是什么？你的问题没有意义。
修复得更清楚一点，如果你知道 codemirror，你就会理解这个问题，因为它也是他们演示的一部分。
请详细说明。 “绝对位置可能不再是屏幕”是什么意思？

标签： javascript codemirror

【解决方案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 选择器不是解决方案的一部分。它只是为了确保我们正在测试您关心的案例——在.CodeMirror-fullscreen 中使用position: absolute 不起作用）。

【讨论】：