Codemirror editor fullscreen - コードミラーにカスタム関数を追加する方法

Question

example of how to make a fullscreen version of the CodeMirror editorがあります。しかし、CodeMirrorウィジェットが他のposition: absoluteまたはrelative divの真ん中にある場合、これは機能しません（CodeMirrorウィジェットの絶対配置は、ページ全体に対して相対的ではありません）。

我々はフルスクリーンに行くために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; 
} 
}; 

後。オプションにこれを追加します。

extraKeys: {"F11": "fullscreen"} 

質問は、フルスクリーンが動作することを確認するCodeMirrorFullscreen CSSクラスに置くことは何ですか？

Answer 1

absoluteの代わりにposition: fixedを使用してください。次のように

はちょうど変更、CodeMirrorのfullscreen.htmlデモのCSSをそれをテストするには：。

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

は（追加 formセレクタはソリューションの一部ではありません私たちがしていることを確認するだけでありますあなたが気にするケースをテストする– position: absoluteを .CodeMirror-fullscreenに使用している場合は動作しません）。