Trình chỉnh sửa Codemirror toàn màn hình - cách thêm chức năng tùy chỉnh vào mã gương

Question

Có một số đẹp example of how to make a fullscreen version of the CodeMirror editor. Tuy nhiên, điều này sẽ không hoạt động nếu tiện ích CodeMirror đang ở giữa một số khác position: absolute hoặc relative div (vị trí tuyệt đối của tiện ích CodeMirror sẽ không liên quan đến toàn bộ trang nữa).

Chúng ta có thể thêm một lệnh mới để CodeMirror đi toàn màn hình:

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

Sau khi chúng tôi cần phải ràng buộc lệnh mới này khi tạo CodeMirror. Thêm tùy chọn này vào các tùy chọn:

extraKeys: {"F11": "fullscreen"} 

Câu hỏi đặt ra trong lớp học CodeMirrorFullscreen Lớp CSS để đảm bảo toàn màn hình sẽ hoạt động?

Answer 1

Sử dụng position: fixed thay vì absolute nên thực hiện thủ thuật.

Để kiểm tra nó ra, chỉ cần thay đổi CSS của bản demo fullscreen.html CodeMirror như sau:.

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

(Các thêm form chọn không phải là một phần của giải pháp Nó chỉ có để đảm bảo chúng tôi kiểm tra trường hợp bạn quan tâm về – nơi sử dụng position: absolute trong .CodeMirror-fullscreen không hoạt động).