6

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"}

CodeMirrorFullscreen問題は、フルスクリーンが機能することを確認するために、CSS クラスに何を入れるかということです。

4

1 に答える 1

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;
  }

(追加されたセレクターはソリューションの一部ではありません。関心のあるケース(in の使用が機能しないform場合) をテストしていることを確認するためのものです)。position: absolute.CodeMirror-fullscreen

于 2013-05-13T07:22:33.480 に答える