Ace: opsi wadah sembulan pelengkapan otomatis

Dibuat pada 2 Feb 2017  ·  4Komentar  ·  Sumber: ajaxorg/ace

Saya menggunakan editor ace di dalam tata letak jquery. Ini bekerja dengan sangat baik. Bagaimana pun saya telah menerapkan fungsionalitas layar penuh dan dalam mode layar penuh, popup pelengkapan otomatis tidak muncul karena ditambahkan ke badan sementara dalam kasus saya <div id="main-container"> dalam mode layar penuh.

Dalam mode layar penuh, saya menekan ctrl+space dan kemudian secara manual memindahkan <div class=" ace_editor ace_autocomplete ace-tomorrow"> di dalam <div id="main-container"> dan tampaknya berfungsi dengan baik dengan posisi yang benar.

Apakah mungkin untuk mendefinisikan wadah untuk sembulan autoComplete sehingga saya dapat memberikannya <div id="main-container"> sebagai wadah alih-alih badan yang akan menyelesaikan masalah ini IMO.

Kode Lengkap: (simpan sebagai .html)
gunakan tombol layar penuh di panel tengah

<!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
Sumber
picture mafar
👍1

Komentar yang paling membantu

Solusi yang berfungsi dengan versi ace saat ini adalah menambahkan

        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 pada 4 Mar 2019
👍3

Semua 4 komentar

+1

antonpodolsky picture antonpodolsky pada 18 Mar 2018

Apakah ada solusi untuk masalah ini?

Wolf-Rost picture Wolf-Rost pada 4 Mar 2019

Solusi yang berfungsi dengan versi ace saat ini adalah menambahkan

        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 pada 4 Mar 2019
👍3

Terima kasih @nightwing

Mungkin pindah

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

pernyataan if di dalam

if (!editor.completer) {

karena cara ini akan membuat beberapa pelengkap otomatis (dan Anda akan berakhir dengan beberapa nomor di DOM).

slavede picture slavede pada 20 Jan 2021
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

gsf picture gsf  ·  6Komentar
narraressan picture narraressan  ·  3Komentar
RickStrahl picture RickStrahl  ·  5Komentar
jakub-zawislak picture jakub-zawislak  ·  3Komentar
xfix picture xfix  ·  5Komentar