намек и полноэкранные проблемы при 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

Согласно моим выводам, построенный в cm.setOption("fullScreen", !cm.getOption("fullScreen")); не будет работать, если внутри jquery layout. Однако с помощью jquery-fullscreen-plugin см. Решение ниже.

Trick установлен для разных контейнеров 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 макета

ответ

Смежные вопросы