Codemirror编辑器全屏 - 如何向Codemirror添加自定义功能

Question

这里有一个关于如何制作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"}

问题是应该将什么放入CodeMirrorFullscreen CSS类中以确保全屏工作？

- ic3

---

如何制作全屏版本 - 全屏版本的什么？你的问题没有意义。 - Piotr Rochala

修正一下，如果你了解CodeMirror，你就能理解这个问题，因为它也是他们演示的一部分。 - ic3

请详细说明一下。你所说的“绝对位置可能不再是屏幕”是什么意思？ - Eliran Malka

Answer 1

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

为了测试，只需修改 CodeMirror 的 fullscreen.html demo 的 CSS 如下：

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

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

- peterflynn

Answer 2

我在类似的情况下使用了ReactJs的codeMirror5，我所做的就是导入全屏样式，然后它就能正常工作了。

import 'codemirror/addon/display/fullscreen.js'
import 'codemirror/addon/display/fullscreen.css'

- Favour Okoh

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

由于您目前的回答写得不清楚，请[编辑]以添加更多细节，以帮助他人理解它如何解决所提出的问题。您可以在帮助中心找到有关编写良好答案的更多信息。 - Community