Codemirror編輯器全屏 - 如何將自定義函數添加到代碼鏡像

有一個不錯的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; 
} 
};

後，我們需要在創建CodeMirror時結合這個新的命令。這增加了選項：

extraKeys: {"F11": "fullscreen"}

的問題是要放什麼東西在CodeMirrorFullscreen CSS類，以確保全屏是否行得通呢？

來源

2011-10-14 ic3

「關於如何製作全屏版本」 - 全屏版本是什麼？你的問題沒有意義。 – rochal

修復得更清晰一些，如果你知道codemirror，你就會明白這個問題，因爲它也是他們演示的一部分。 – ic3

請詳細說明一下。「絕對位置可能不再是屏幕」是什麼意思？ –

使用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選擇不是解決方案的一部分這只是爲了確保我們測試你關注的案例–其中使用position: absolute的.CodeMirror-fullscreen不起作用）。

來源

2013-05-13 07:22:33 peterflynn

Codemirror編輯器全屏 - 如何將自定義函數添加到代碼鏡像

回答

相關問題