当 codemirror 在 jquery 布局内时提示和全屏问题

Question

我正在使用codeMirror inside UI Layout Plug-in

问题：

在内部布局时，CodeMirror: Full Screen Editing 不起作用。 F-11 缩放，esc 退出
我尝试使用 jquery-fullscreen-plugin 全屏显示，似乎工作正常但自动完成提示没有显示
with jquery-fullscreen-plugin ，我尝试提供提示容器（见下面的代码），全屏工作正常，不全屏时不工作。菜单显示偏离光标位置。

我更愿意使用 jquery-fullscreen-plugin，但由于容器选项，我不知道如何处理提示菜单中的偏移量

完整代码（另存为.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 }'` ; 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>

Answer 1

根据我的发现，内置 cm.setOption("fullScreen", !cm.getOption("fullScreen")); 在 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();
    }
  });

当 codemirror 在 jquery 布局内时提示和全屏问题

hint and fullscreen problems when codemirror is inside jquery layout

html

javascript

jquery

codemirror