Ace: خيار حاوية الإكمال التلقائي المنبثقة

تم إنشاؤها على ٢ فبراير ٢٠١٧  ·  4تعليقات  ·  مصدر: ajaxorg/ace

أنا أستخدم محرر ace داخل تخطيط jquery. انها تعمل بشكل جيد جدا. كيف قمت بتطبيق وظيفة ملء الشاشة وفي وضع ملء الشاشة ، لا تظهر نافذة الإكمال التلقائي المنبثقة حيث تم وضعها على الجسم بينما في حالتي <div id="main-container"> في وضع ملء الشاشة.

في وضع ملء الشاشة ، أضغط على ctrl + space ثم نقلت يدويًا <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 في ٤ مارس ٢٠١٩
👍3

ال 4 كومينتر

+1

antonpodolsky picture antonpodolsky في ١٨ مارس ٢٠١٨

هل هناك حل لهذه المشكلة؟

Wolf-Rost picture Wolf-Rost في ٤ مارس ٢٠١٩

الحل البديل الذي يعمل مع الإصدار الحالي من 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 في ٤ مارس ٢٠١٩
👍3

شكرا @ nightwing

ربما تتحرك

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

داخل بيان إذا

if (!editor.completer) {

نظرًا لأنه بهذه الطريقة سيُنشئ مثيلًا لعدة عمليات إكمال تلقائي (وسوف ينتهي بك الأمر مع عدد متعدد منها في DOM).

slavede picture slavede في ٢٠ يناير ٢٠٢١
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

dimroc picture dimroc  ·  6تعليقات
RickStrahl picture RickStrahl  ·  5تعليقات
ketysek picture ketysek  ·  3تعليقات
christianbs picture christianbs  ·  3تعليقات
akosyakov picture akosyakov  ·  3تعليقات