Codemirror editörü tam ekran - kod aynaya özel işlevler nasıl eklenir

Question

Güzel bir example of how to make a fullscreen version of the CodeMirror editor var. Ancak bu CodeMirror widget'ı diğer position: absolute veya relative div'in ortasındaysa (CodeMirror küçük aracının mutlak konumlandırması artık tüm sayfaya göre olmayacaksa) çalışmayacaktır.

Biz tam ekran gitmek CodeMirror yeni bir komut ekleyebilirsiniz:

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

biz kod düzenleyicisi oluştururken bu yeni komut bağlamak gerekir sonra. seçeneklerine ekleyin:

extraKeys: {"F11": "fullscreen"} 

soru emin tam ekran çalışacak hale getirmek için CodeMirrorFullscreen CSS sınıfında koymak için nedir?

Answer 1

absolute yerine position: fixed'u kullanmak hile yapmalıdır. aşağıdaki gibi

sadece değiştirmek CodeMirror en fullscreen.html demo CSS bunu test etmek için:.

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

(katma form seçici çözümün bir parçası değildir Biz olduğumuzdan emin olmak için sadece orada – ile ilgilendiğiniz kasanın test edilmesi'un .CodeMirror-fullscreen'da kullanılmadığı durumlarda).