Ace: Опция автозаполнения всплывающего контейнера

Созданный на 2 февр. 2017  ·  4Комментарии  ·  Источник: ajaxorg/ace

Я использую редактор ace внутри макета jquery. Это работает очень хорошо. Как бы я ни реализовал полноэкранную функциональность, и в полноэкранном режиме всплывающее окно автозаполнения не появляется, поскольку оно привязано к телу, в то время как в моем случае <div id="main-container"> находится в полноэкранном режиме.

В полноэкранном режиме я нажимаю ctrl + пробел, а затем вручную перемещаю <div class=" ace_editor ace_autocomplete ace-tomorrow"> внутри <div id="main-container"> , и, кажется, все работает нормально с правильной позицией.

Можно ли определить контейнер для всплывающего окна автозаполнения, чтобы я мог дать ему <div id="main-container"> в качестве контейнера вместо тела, что решит эту проблему IMO.

Полный код: (сохранить как .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
Источник
picture 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);
        }
picture nightwing 4 мар. 2019
👍3

Все 4 Комментарий

+1

antonpodolsky picture antonpodolsky 18 мар. 2018

Есть ли обходной путь для этой проблемы?

Wolf-Rost picture Wolf-Rost 4 мар. 2019

Обходной путь, который работает с текущей версией 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 picture nightwing 4 мар. 2019
👍3

Спасибо @nightwing

Может быть, двигаться

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

внутри оператора if

if (!editor.completer) {

так как таким образом он создаст несколько автозаполнителей (и вы получите несколько из них в DOM).

slavede picture slavede 20 янв. 2021
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

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

SuperSajuuk picture SuperSajuuk  ·  4Комментарии
narraressan picture narraressan  ·  3Комментарии
jakub-zawislak picture jakub-zawislak  ·  3Комментарии
gsf picture gsf  ·  6Комментарии
RickStrahl picture RickStrahl  ·  5Комментарии