Ace: 자동 완성 팝업 컨테이너 옵션

에 만든 2017년 02월 02일 · 4코멘트 · 출처: ajaxorg/ace

jquery 레이아웃 내에서 ace 편집기를 사용하고 있습니다. 그것은 아주 잘 작동합니다. 나는 전체 화면 기능을 구현했으며 전체 화면 모드에서는 본문에 적용되기 때문에 자동 완성 팝업이 나타나지 않는 반면 제 경우에는 <div id="main-container"> 가 전체 화면 모드에 있습니다.

전체 화면 모드에서 ctrl+space를 누른 다음 <div id="main-container"> <div class=" ace_editor ace_autocomplete ace-tomorrow"> 를 이동했는데 올바른 위치에서 제대로 작동하는 것 같습니다.

autoComplete 팝업에 대한 컨테이너를 정의하여 이 문제 IMO를 해결할 본문 대신 <div id="main-container"> 를 컨테이너로 제공할 수 있습니까?

완전한 코드: (.html로 저장)
중앙 창에서 버튼 전체 화면 사용

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>ACE Autocompletion demo</title>
    <style type="text/css" media="screen">
      body {
        overflow: hidden;
      }

      #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <!-- html -->
    <div class="myDiv" style="height:800px">
      <div class="ui-layout-center">Center
        <button id="fullscreenButton" type="button">Full-Screen</button>
      </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">
          <div id="editor">Type in a word like "will" below and press ctrl+space or alt+space to get "rhyme completion"</div>
        </div>
      </div>
      <div class="ui-layout-west">West</div>
    </div>
    <!-- ace-plugin -->
    <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></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>
    <script>
      //
      // setup ace editor
      function setupAce() {
        // trigger extension
        ace.require("ace/ext/language_tools");
        var editor = ace.edit("editor");
        editor.session.setMode("ace/mode/html");
        editor.setTheme("ace/theme/tomorrow");
        // enable autocompletion and snippets
        editor.setOptions({
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: false
        });
        $("#fullscreenButton").click(function(event) {
          $("#main-container").toggleFullScreen();
        });
      }
      // init layout
      $('.myDiv').layout({
        resizeWhileDragging: true,
        resizable: true,
        east: {
          size: 800
        },
        onload_end: function() {
          setupAce();
        }
      });
      //
    </script>
  </body>

</html>

language_tools

출처

mafar

👍1

가장 유용한 댓글

현재 버전의 ace에서 작동하는 해결 방법은 다음을 추가하는 것입니다.

        function getPopup() {
            if (!editor.completer) {
                var Autocomplete = ace.require("ace/autocomplete").Autocomplete
                editor.completer = new Autocomplete()
            }
            editor.completer.editor = editor
            editor.completer.$init()

            return editor.completer.popup.container;
        }
        document.onfullscreenchange = function(event) {
            var popup = getPopup();
            if (document.fullscreen)
                $("#main-container")[0].appendChild(popup);
            else
                document.body.appendChild(popup);
        }

nightwing 에 2019년 03월 04일

👍3

모든 4 댓글

antonpodolsky 에 2018년 03월 18일

이 문제에 대한 해결 방법이 있습니까?

Wolf-Rost 에 2019년 03월 04일

현재 버전의 ace에서 작동하는 해결 방법은 다음을 추가하는 것입니다.

        function getPopup() {
            if (!editor.completer) {
                var Autocomplete = ace.require("ace/autocomplete").Autocomplete
                editor.completer = new Autocomplete()
            }
            editor.completer.editor = editor
            editor.completer.$init()

            return editor.completer.popup.container;
        }
        document.onfullscreenchange = function(event) {
            var popup = getPopup();
            if (document.fullscreen)
                $("#main-container")[0].appendChild(popup);
            else
                document.body.appendChild(popup);
        }

nightwing 에 2019년 03월 04일

👍3

@nightwing 감사합니다

어쩌면 움직여

  editor.completer.editor = editor
  editor.completer.$init()

if 문 내부

if (!editor.completer) {

이런 식으로 여러 자동 완성기를 인스턴스화하므로 DOM에 여러 개의 자동 완성기가 생성됩니다.

slavede 에 2021년 01월 20일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Ace: 자동 완성 팝업 컨테이너 옵션

가장 유용한 댓글

모든 4 댓글

관련 문제