提示和全屏問題時codemirror是jQuery的佈局

我使用codeMirror內UI Layout Plug-in 提示和全屏問題時codemirror是jQuery的佈局

問題裏面：

內部佈局時，CodeMirror：Full Screen Editing不起作用。 F-11放大，ESC鍵退出
我使用jquery-fullscreen-plugin試過全屏幕，似乎工作正常，但隨後自動完成提示不顯示
與jQuery的全屏-插件，我想給提示容器（見下面的代碼），全屏工作良好，不全屏時不工作。菜單出現在光標位置偏移處。

我更願意使用jquery全屏-插件，但我不知道如何在提示菜單句柄偏移，因爲集裝箱選項

完整代碼（保存爲html的）

<!doctype html> 
<title>CodeMirror: Any Word Completion Demo</title> 
<meta charset="utf-8" /> 
<!-- codemirror-plugin --> 
<link rel=stylesheet href="https://codemirror.net/doc/docs.css"> 
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> 
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css"> 
<link rel="stylesheet" href="https://codemirror.net/addon/display/fullscreen.css"> 
<script src="https://codemirror.net/lib/codemirror.js"></script> 
<script src="https://codemirror.net/addon/hint/show-hint.js"></script> 
<script src="https://codemirror.net/addon/hint/anyword-hint.js"></script> 
<script src="https://codemirror.net/mode/shell/shell.js"></script> 
<script src="https://codemirror.net/addon/display/fullscreen.js"></script> 
<!-- layout.jquery-plugin --> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<link type="text/css" rel="stylesheet" href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css" /> 
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script> 
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-1.3.0.rc30.80.js"></script> 
<!-- jquery-fullscreen-plugin --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-fullscreen-plugin/1.1.4/jquery.fullscreen-min.js"></script> 
<!-- html --> 
<div class="myDiv" style="height:800px"> 
    <div class="ui-layout-center">Center</div> 
    <div class="ui-layout-north">North</div> 
    <div class="ui-layout-south">South</div> 
    <div class="ui-layout-east"> code Mirror 
    <div id="main-container"> 
     <button id="fullscreenButton" type="button">Full-Screen</button> 
     <textarea id="code" name="code"> 
     #!/bin/bash # clone the repository git clone http://github.com/garden/tree # generate HTTPS credentials cd tree openssl genrsa -aes256 -out https.key 1024 openssl req -new -nodes -key https.key -out https.csr openssl x509 -req -days 365 -in https.csr -signkey https.key -out https.crt cp https.key{,.orig} openssl rsa -in https.key.orig -out https.key # start the server in HTTPS mode cd web sudo node ../server.js 443 'yes' >> ../node.log & # here is how to stop the server for pid in `ps aux | grep 'node ../server.js' | awk '{print $2}'` ; do sudo kill -9 $pid 2> /dev/null done exit 0 
     </textarea> 
    </div> 
    </div> 
    <div class="ui-layout-west">West</div> 
</div> 
<!-- js --> 
<script> 
    // 
    // setupCodeMirror 
    function setupCodeMirror() { 
    CodeMirror.commands.autocomplete = function(cm) { 
     cm.showHint({ 
     hint: CodeMirror.hint.anyword, 
     container: $("#main-container").get(0) 
     }); 
    }; 
    // 
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
     mode: 'shell', 
     theme: 'default', 
     lineWrapping: true, 
     lineNumbers: true, 
     extraKeys: { 
     "Ctrl-Space": "autocomplete", 
     "F11": function(cm) { 
      cm.setOption("fullScreen", !cm.getOption("fullScreen")); 
     }, 
     "Esc": function(cm) { 
      if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); 
     } 
     } 
    }); 
    $("#fullscreenButton").click(function(event) { 
     $("#main-container").toggleFullScreen(); 
    }); 

    } 
    // init layout 
    $('.myDiv').layout({ 
    resizeWhileDragging: true, 
    resizable: true, 
    east: { 
     size: 800 
    }, 
    onload_end: function() { 
     setupCodeMirror(); 
    } 
    }); 
    // 
</script> 
</article>

來源

2017-02-01 django

根據我的發現，在內置的jquery佈局中不起作用。然而，使用jquery-fullscreen-plugin，請參閱下面的解決方案。

特技在全屏事件前後設置不同的showhint容器。

var showHintContainer = document.body; 
    // setupCodeMirror 
    function setupCodeMirror() { 
    CodeMirror.commands.autocomplete = function(cm) { 
     cm.showHint({ 
     hint: CodeMirror.hint.anyword, 
     container: showHintContainer 
     }); 
    }; 
    // 
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
     mode: 'shell', 
     theme: 'default', 
     lineWrapping: true, 
     lineNumbers: true, 
     extraKeys: { 
     "Ctrl-Space": "autocomplete" 
     } 
    }); 
    $("#fullscreenButton").click(function(event) { 
     $("#main-container").toggleFullScreen(); 
    }); 
    $(document).bind("fullscreenchange", function() { 
     var fullScreenState = $(document).fullScreen() ? 'on' : 'off'; 
     if (fullScreenState === 'on') { 
     showHintContainer = $("#main-container").get(0); 
     } else { 
     showHintContainer = document.body; 
     } 
    }); 
    } 
    // init layout 
    $('.myDiv').layout({ 
    resizeWhileDragging: true, 
    resizable: true, 
    east: { 
     size: 800 
    }, 
    onload_end: function() { 
     setupCodeMirror(); 
    } 
    });

來源

2017-02-02 08:43:58 django

提示和全屏問題時codemirror是jQuery的佈局

回答

相關問題