Автозаполнение в редакторе ACE

Я нашел simmilar вопрос: Автозаполнение автозапуска Ace и несколько языков

Но ответы заключались в том, что автозаполнение не поддерживается ACE, и согласно группа Google для редактора Ace" Это для меня Туз и нам это обязательно нужно для Cloud9 ".

Этот пост - один год, и, как вы можете видеть, облако9 теперь поддерживает автозаполнение: https://c9.io/site/features/

Так автозаполнение доступно в редакторе Ace по умолчанию? Я не могу найти никакой информации об этом.

Ответы

Ответ 1

Autocomplete теперь является официальной частью API. Включение этого требует 3 строки кода:

ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
    enableBasicAutocompletion: true
});

В зависимости от вашей установки с require-js вам также может потребоваться добавить дополнительный файл javascript в html для вашей страницы:

<script src="ace/ext-language_tools.js"></script>

Вы можете найти демо на https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

И вот страница wiki, которую я только что написал по теме:

https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

Ответ 2

Автозаполнение по-прежнему недоступно для Ace, однако мы внедрили компонент, который делает это для Codiad IDE, который основан на Ace и полностью Открытый исходный код. Вы можете проверить код на Github, он, несомненно, поможет вам написать свой собственный.

Ответ 3

Так как Autocomplete теперь является частью ACE api:

1) Включите ace.js вверху вашего html:

  <script type="text/javascript" src="js/ace.js"></script>

2) Также включите свой режим (тип языка):

  <script type="text/javascript" src="js/mode-yaml.js"></script>

3) Также укажите theme:

  <script type="text/javascript" src="js/theme-monokai.js"></script>

4) Также включите ex-language_tools.js:

  <script src="js/ext-language_tools.js"></script>

5) Добавьте свой div с редактором id (это станет вашей IDE):

  <div id="editor"></div>

6) Включите следующее script (см. мои комментарии, чтобы понять их):

  <script>
    var langTools = ace.require("ace/ext/language_tools");

Строка ниже преобразует ваш div с id = "editor" в редактор

  var editor = ace.edit("editor");

В строке ниже задается цветовая тема. Другие темы здесь... попробуйте их здесь

editor.setTheme("ace/theme/monokai");

Строка ниже устанавливает режим, основанный на языке программирования... другие режимы здесь:

editor.getSession().setMode("ace/mode/yaml");


    editor.setShowPrintMargin(false);

Строки ниже включают автозаполнение в режиме реального времени.

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
});

Таким образом, все это можно разбить на следующие:

<!DOCTYPE html>
<html>
<head>
  <title>IDE AUTOCOMPLETE</title>
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css">
  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/ace.js"></script>
  <script type="text/javascript" src="js/mode-yaml.js"></script>
  <script type="text/javascript" src="js/theme-monokai.js"></script>
  <script src="js/ext-language_tools.js"></script>
</head>
<body>
  <!-- EDITOR SECTION BELOW! -->
  <div id="editor"></div>
  <script>
    var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/yaml");
    editor.setShowPrintMargin(false);
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: false
    });
  </script>
  <!-- EDITOR SECTION ABOVE -->
</body>
</html>

Ответ 4

AjaxOrg нажал фиксацию в своем репозитории Cloud9 со следующим сообщением:

Модуль завершения кода

Я предполагаю, что это будет ответом на этот вопрос.

Здесь является фиксацией.

Кроме того, я думаю, что этот - хороший проект, который может нам помочь.

Для получения дополнительной информации мы можем следовать сообщению эта проблема открыта в репозитории Cloud9.

Ответ 5

Обязательно выполните следующие импортные операции

require('ace/ext/language_tools');
require('ace/multi_select');

Использовать по фрагменту по мере необходимости

editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

Ответ 6

В настоящее время он недоступен в любой форме. Согласно этому вопросу: https://github.com/ajaxorg/ace/issues/1031

Автозаполнение доступно только в Cloud9 IDE (которое основано на ACE) и может быть доступно позже в качестве отдельного плагина для редактора ACE.