46

我发现了类似的问题：Ace Editor autocomplete and multiple languages

但回应是 ACE 不支持自动完成功能，并且根据 Google 小组的 Ace 编辑器的说法，“我希望 Ace 能够使用它，而 Cloud9 确实需要它”。

这篇文章已经有一年了，正如你所看到的，cloud9 现在支持自动完成： https ://c9.io/site/features/

那么默认情况下，Ace Editor 中是否提供自动补全功能？我找不到任何关于它的信息。

4

8 回答 8

57

自动完成现在是 API 的官方部分。启用它需要 3 行代码：

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

根据您使用 require-js 的设置，您可能还需要在页面的 html 中包含一个额外的 javascript 文件：

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

您可以在https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html找到演示

这是我刚刚写的关于这个主题的维基页面：

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

于 2013-11-01T15:59:16.880 回答
18

由于自动完成现在是ACE api 的一部分：

1)在 html 顶部包含ace.js ：

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

2）还包括您的模式（语言类型）：

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

3）还包括你的主题：

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

4) 还包括ex-language_tools.js：

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

5）使用 id 编辑器添加您的 div（这将成为您的IDE）：

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

6）包括以下脚本（请参阅我的评论以了解它们）：

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

下面的行将 id="editor" 的 div 转换为编辑器

  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>
于 2015-01-07T21:18:39.307 回答
10

Ace 本身仍然无法使用自动完成功能，但是我们已经为基于 Ace 且完全开源的Codiad IDE实现了一个组件。您可以在Github上查看代码，它肯定会帮助您编写自己的代码。

于 2013-01-10T18:31:48.520 回答
5

注意，要实现自定义完成逻辑，您可以在enableBasicAutocompletion.

见jsfiddle

<!-- integrity removed for example sake -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>

<script>
const editor = ace.edit('some-ace-editor-holder-div-id');
editor.setOptions({
  enableBasicAutocompletion: [{
    getCompletions: (editor, session, pos, prefix, callback) => {
      // note, won't fire if caret is at a word that does not have these letters
      callback(null, [
        {value: 'hello', score: 1, meta: 'some comment'},
        {value: 'world', score: 2, meta: 'some other comment'},
      ]);
    },
  }],
  // to make popup appear automatically, without explicit _ctrl+space_
  enableLiveAutocompletion: true,
});
</script>

在此处输入图像描述

信息来源

另请参阅此和此答案

于 2020-12-09T15:37:39.770 回答
3

AjaxOrg已在其Cloud9存储库中推送了一个提交，并带有以下消息：

代码补全插件

我认为这将是这个问题的答案。

这是提交。

另外，我认为这是一个可以帮助我们的好项目。

有关更多信息，我们可以关注Cloud9 存储库中打开的此问题的消息。

于 2013-06-04T17:12:55.057 回答
3

确保有以下进口

require('ace/ext/language_tools');

根据需要在代码段下使用

editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
于 2016-11-15T07:26:41.230 回答
0

目前它不以任何形式提供。根据这个问题： https ://github.com/ajaxorg/ace/issues/1031

自动完成功能仅在 Cloud9 IDE（基于 ACE）中可用，以后可能会作为 ACE 编辑器的单独插件提供。

于 2012-11-24T21:46:45.397 回答
0

将此添加到您的已安装：

this.aceEditor.setOptions({
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true
      })
于 2020-07-22T07:30:01.980 回答