कोडमिरर संपादक पूर्णस्क्रीन - कोड दर्पण

Question

पर कस्टम फ़ंक्शंस जोड़ने के लिए कैसे एक अच्छा example of how to make a fullscreen version of the CodeMirror editor है। हालांकि यह काम नहीं करेगा यदि कोडमिरर विजेट कुछ अन्य position: absolute या relative div के बीच में है (कोडमिरर विजेट की पूर्ण स्थिति अब पूरे पृष्ठ के सापेक्ष नहीं होगी)। के बाद हम 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 वर्ग में डाल करने के लिए सुनिश्चित फुलस्क्रीन काम करेंगे बनाने के लिए है?

Answer 1

के बजाय position: fixed का उपयोग करना चाल चलाना चाहिए।

इस प्रकार इसे बाहर का परीक्षण करने के लिए, CodeMirror के fullscreen.html डेमो के सीएसएस सिर्फ संशोधित:।

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

(जोड़ा form चयनकर्ता समाधान का हिस्सा नहीं है यह यकीन है कि हम कर रहे हैं बनाने के लिए सिर्फ वहाँ – पर position: absolute का उपयोग करते हुए उस मामले का परीक्षण करें जहां .CodeMirror-fullscreen काम नहीं करता है)।