有一个不错的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 时需要绑定(bind)这个新命令。将此添加到选项中:
extraKeys: {"F11": "fullscreen"}
问题是要在 CodeMirrorFullscreen
CSS 类中放置什么以确保全屏可用?
最佳答案
使用 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
选择器不是解决方案的一部分。它只是为了确保我们正在测试您关心的情况 – 使用 position: absolute
在 .CodeMirror-fullscreen
中不起作用)。
关于javascript - Codemirror editor fullscreen - 如何向代码镜像添加自定义函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7766059/