Ace: स्वत: पूर्ण पॉपअप कंटेनर विकल्प

को निर्मित 2 फ़र॰ 2017 · 4टिप्पणियाँ · स्रोत: ajaxorg/ace

मैं jQuery लेआउट के अंदर इक्का संपादक का उपयोग कर रहा हूँ। यह बहुत अच्छा वॉक करता है। मैंने कभी भी एक पूर्ण स्क्रीन कार्यक्षमता को लागू किया है और पूर्ण स्क्रीन मोड में, स्वत: पूर्ण पॉपअप प्रकट नहीं होता है क्योंकि इसे शरीर से जोड़ा जाता है जबकि मेरे मामले में <div id="main-container"> पूर्ण स्क्रीन मोड में है।

पूर्ण स्क्रीन मोड में, मैं ctrl+space दबाता हूं और फिर मैन्युअल रूप से <div class=" ace_editor ace_autocomplete ace-tomorrow"> को <div id="main-container"> $ के अंदर ले जाता हूं और यह सही स्थिति के साथ ठीक काम करता प्रतीत होता है।

क्या स्वत: पूर्ण पॉपअप के लिए एक कंटेनर को परिभाषित करना संभव है, इसलिए मैं इसे शरीर के बजाय कंटेनर के रूप में <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

सबसे उपयोगी टिप्पणी

ऐस के वर्तमान संस्करण के साथ काम करने वाला एक समाधान जोड़ना है

        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 4 मार्च 2019

👍3

सभी 4 टिप्पणियाँ

antonpodolsky 18 मार्च 2018

क्या इस मुद्दे का कोई समाधान है?

Wolf-Rost 4 मार्च 2019

ऐस के वर्तमान संस्करण के साथ काम करने वाला एक समाधान जोड़ना है

        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 4 मार्च 2019

👍3

धन्यवाद @ नाइटविंग

शायद आगे बढ़ें

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

अंदर अगर बयान

if (!editor.completer) {

इस तरह से यह कई स्वत: पूर्ण करने वालों को तुरंत चालू कर देगा (और आप डीओएम में उनमें से कई संख्या के साथ समाप्त हो जाएंगे)।

slavede 20 जन॰ 2021

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Ace: स्वत: पूर्ण पॉपअप कंटेनर विकल्प

सबसे उपयोगी टिप्पणी

सभी 4 टिप्पणियाँ

संबंधित मुद्दों