Edytor Codemirror na pełnym ekranie - jak dodać niestandardowe funkcje do kodu lustrzanego

Question

Jest niezły example of how to make a fullscreen version of the CodeMirror editor. Jednak to nie zadziała, jeśli widżet CodeMirror znajduje się w środku jakiegoś innego elementu div position: absolute lub relative (bezwzględne pozycjonowanie widgetu CodeMirror nie będzie już dotyczyło całej strony).

Możemy dodać nowe polecenie do CodeMirror jechać na pełnym ekranie:

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

Po musimy powiązać tę nową komendę przy tworzeniu CodeMirror. Dodaj to do opcji:

extraKeys: {"F11": "fullscreen"} 

Pytanie brzmi, co umieścić w klasie CodeMirrorFullscreen CSS, aby upewnić się, że będzie działać na pełnym ekranie?

Answer 1

Używając zamiast tego, powinienem wykonać sztuczkę.

Aby przetestować go, po prostu zmodyfikować CSS fullscreen.html demo CodeMirror w następujący sposób:.

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

(Dodana form selektor nie jest częścią rozwiązania To właśnie tam, aby upewnić się, że jesteśmy testowanie sprawy, na której Ci zależy, –, gdy używanie position: absolute w .CodeMirror-fullscreen nie działa).