Javascript 当codemirror位于jquery布局内时出现提示和全屏问题

我在里面用

问题：

在内部布局时，CodeMirror:不起作用。F-11可缩放，esc可退出

我尝试了全屏使用，似乎工作正常，但自动完成提示并没有出现

使用jquery全屏插件，我尝试了给出提示容器（见下面的代码），在全屏下工作良好，在非全屏下不工作。菜单显示从光标位置偏移

我更喜欢使用jquery全屏插件，但由于容器选项，我不知道如何处理提示菜单中的偏移量

完整代码（另存为.html）

CodeMirror：任何单词完成演示
居中
北
南方
代码镜像
全屏
#!/bin/bash#克隆存储库git clonehttp://github.com/garden/tree #生成HTTPS凭据cd树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#在https模式下启动服务器cd web sudo node../server.js 443'yes'>../node.log&#以下是如何在'ps aux | grep'node../server.js'awk'{print$2}'中停止服务器进行pid；do sudo kill-9$pid 2>/dev/null完成退出0
西部
//
//设置代码镜像
函数setupCodeMirror（）{
CodeMirror.commands.autocomplete=函数（cm）{
显示提示({
提示：CodeMirror.hint.anyword，
容器：$（“#主容器”）.get（0）
});
};
//
var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
模式：“shell”，
主题：'默认'，
换行：对，
行号：对，
外键：{
“Ctrl空格”：“自动完成”，
“F11”：功能（厘米）{
cm.setOption（“全屏”），！cm.getOption（“全屏”）；
},
“Esc”：功能（cm）{
if（cm.getOption（“全屏”））cm.setOption（“全屏”），false；
}
}
});
$（“#全屏按钮”）。单击（函数（事件）{
$（“#主容器”）.toggleFullScreen（）；
});
}
//初始布局
$（'.myDiv'）。布局({
重定尺寸同时拉毛：是的，
可调整大小：正确，
东部：{
尺码：800
},
onload_end:函数（）{
setupCodeMirror（）；
}
});
//

根据我的发现，内置

cm.setOption（“全屏”）、！cm.getOption（“全屏”）在jquery布局内时不起作用。
但是，对于jquery全屏插件，请参见下面的解决方案

技巧在全屏活动前后设置为不同的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();
    }
  });

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