Ace: option de conteneur contextuel autoComplete

Créé le 2 févr. 2017  ·  4Commentaires  ·  Source: ajaxorg/ace

J'utilise l'éditeur ace dans la mise en page jquery. Ça marche très bien. Comment j'ai implémenté une fonctionnalité plein écran et en mode plein écran, la fenêtre de saisie semi-automatique n'apparaît pas car elle est ajoutée au corps alors que dans mon cas, <div id="main-container"> est en mode plein écran.

En mode plein écran, j'appuie sur ctrl + espace, puis j'ai déplacé manuellement <div class=" ace_editor ace_autocomplete ace-tomorrow"> à l'intérieur <div id="main-container"> et cela semble fonctionner correctement avec la position correcte.

Est-il possible de définir un conteneur pour la fenêtre contextuelle de saisie semi-automatique afin que je puisse lui donner <div id="main-container"> comme conteneur au lieu de corps, ce qui résoudra ce problème à l'OMI.

Code complet : (enregistrer sous .html)
utiliser le bouton plein écran dans le volet central

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

Commentaire le plus utile

Une solution de contournement qui fonctionne avec la version actuelle d'ace consiste à ajouter

        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 le 4 mars 2019
👍3

Tous les 4 commentaires

+1

antonpodolsky picture antonpodolsky le 18 mars 2018

Existe-t-il une solution à ce problème ?

Wolf-Rost picture Wolf-Rost le 4 mars 2019

Une solution de contournement qui fonctionne avec la version actuelle d'ace consiste à ajouter

        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 le 4 mars 2019
👍3

Merci @nightwing

Peut-être déménager

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

à l'intérieur de l'instruction if

if (!editor.completer) {

car de cette façon, il instanciera plusieurs autocompléteurs (et vous vous retrouverez avec plusieurs d'entre eux dans le DOM).

slavede picture slavede le 20 janv. 2021
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

RickStrahl picture RickStrahl  ·  5Commentaires
dimroc picture dimroc  ·  6Commentaires
STRd6 picture STRd6  ·  4Commentaires
mkosieradzki picture mkosieradzki  ·  4Commentaires
vbguyny picture vbguyny  ·  5Commentaires