Question

我发现了同样的问题：Ace Editor autocomplete and multiple languages

但是回复是ACE不支持自动完成，并且根据Google group for Ace Editor“这是我对Ace的渴望，我们明确需要它 for Cloud9“。

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

默认情况下，Ace Editor中是否提供自动完成功能？我找不到任何有关它的信息。

Answer 1

自动填充功能现已成为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

Answer 2

由于自动填充功能现已成为ACE api：

的一部分

1）在html顶部加入ace.js：

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

2）还包括mode（语言类型）：

  <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）使用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");

以下行设置颜色主题。其他可用主题here ...尝试here

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>

Answer 3

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

Answer 4

AjaxOrg 已在 Cloud9 存储库中推送提交，并显示以下消息：

代码完成插件

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

Here是提交。

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

有关详细信息，我们可以关注this issue opened in Cloud9 repository。

中的消息

Answer 5

确保有以下导入

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

根据需要在代码段下使用

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

Answer 6

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

自动填充功能仅适用于Cloud9 IDE（基于ACE），可以稍后作为ACE编辑器的单独插件使用。

Answer 7

将此添加到已安装的文件中：

this.aceEditor.setOptions({
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true
      })

Answer 8

注意，要实现自定义完成逻辑，可以在 <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, [ {name: 'hello', value: 'hello', score: 1, meta: 'some comment'}, {name: 'world', value: 'world', score: 1, meta: 'some other comment'}, ]); }, }], // to make popup appear automatically, without explicit _ctrl+space_ enableLiveAutocompletion: true, }); </script>中传递完成提供者对象。

请参见jsfiddle

 <Tabs value={value} onChange={handleChange} aria-label="simple tabs 
     example">
   <div onClick={() => history.push("/timer")}>
        <Tab   label="Timer" />
    </div>
  </Tabs>

信息source

另请参阅this和this答案

ACE编辑器中的自动完成功能

8 个答案: