Javascript ACE 编辑器中的自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13545433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocompletion in ACE editor
提问by Wojciech Danilo
I've found simmilar question: Ace Editor autocomplete and multiple languages
我发现了类似的问题：Ace Editor autocomplete and multiple language
But the responses were that autocompletion is not supported by ACE, and according to Google group for Ace Editor"It is on my wishlish for Ace and we definitively need it for Cloud9".
但回应是 ACE 不支持自动完成功能，根据谷歌 Ace 编辑器组的说法， “这是我对 Ace 的愿望，我们绝对需要它用于 Cloud9”。
This post is one year old and as you can see, the cloud9 supports autocompletion now: https://c9.io/site/features/
这篇文章已经有一年了，如您所见，cloud9 现在支持自动完成：https://c9.io/site/features/
So is autocompletion available in Ace Editor by default? I cannot find any information about it.
那么默认情况下，Ace Editor 中是否提供自动完成功能？我找不到任何关于它的信息。
回答by hwjp
Autocomplete is now an official part of the API. Enabling it takes 3 lines of code:
自动完成现在是 API 的正式部分。启用它需要 3 行代码：
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page:
根据您使用 require-js 的设置，您可能还需要在页面的 html 中包含一个额外的 javascript 文件：
<script src="ace/ext-language_tools.js"></script>
You can find a demo at https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
您可以在https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html找到演示
And here's the wiki page I just wrote on the topic:
这是我刚刚写的关于这个主题的维基页面：
https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
回答by maudulus
Since Autocomplete is now a part of the ACEapi:
由于自动完成现在是ACEapi的一部分：
1) Include ace.jsat the top of your html:
1)在 html 的顶部包含ace.js：
<script type="text/javascript" src="js/ace.js"></script>
2) Also include your mode(language type):
2）还包括您的模式（语言类型）：
<script type="text/javascript" src="js/mode-yaml.js"></script>
3) Also include your theme:
3）还包括您的主题：
<script type="text/javascript" src="js/theme-monokai.js"></script>
4) Also include ex-language_tools.js:
4) 还包括ex-language_tools.js：
<script src="js/ext-language_tools.js"></script>
5) Add your div with id editor (this will become your IDE):
5）用id编辑器添加你的div（这将成为你的IDE）：
<div id="editor"></div>
6) Include the following script (see my comments to understand them) :
6）包括以下脚本（请参阅我的评论以了解它们）：
<script>
var langTools = ace.require("ace/ext/language_tools");
Line below transforms your div with id="editor" into the editor
下面的行将带有 id="editor" 的 div 转换为编辑器
var editor = ace.edit("editor");
Line below sets the color theme. Other themes available here...try them here
下面的行设置颜色主题。其他可用的主题在这里......尝试一下这里
editor.setTheme("ace/theme/monokai");
Line below sets the mode based on programming language...other modes here:
下面的行根据编程语言设置模式......这里的其他模式：
editor.getSession().setMode("ace/mode/yaml");
editor.setShowPrintMargin(false);
Lines below turns ON autocompletion in real-time.
下面的行实时打开自动完成功能。
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
Thus, the whole thing could be broken down into the following:
因此，整个事情可以分解为以下内容：
<!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>
回答by Flolagale
Autocompletion is still not available natively for Ace, however we have implemented a component doing that for the Codiad IDEwhich is based on Ace and fully open source. You can check the code on Github, it will surely help you to write your own.
Ace 本身仍然无法使用自动完成功能，但是我们已经为Codiad IDE实现了一个组件，该组件基于 Ace 并且完全开源。您可以在Github上查看代码，它肯定会帮助您编写自己的代码。
回答by Ionic? Biz?u
AjaxOrghas pushed a commit in their Cloud9repository with the following message:
AjaxOrg已在其Cloud9存储库中推送了一个提交，并带有以下消息：
Code completion plug-in
代码补全插件
I assume that this would be the answer to this question.
我认为这将是这个问题的答案。
Hereis the commit.
这是提交。
Also, I think that thisis a good project that can help us.
另外，我认为这是一个可以帮助我们的好项目。
For more information, we can follow the message from this issue opened in Cloud9 repository.
有关更多信息，我们可以按照在 Cloud9 存储库中打开的此问题中的消息进行操作。
回答by Dhruv Pal
Make sure to have following imports
确保有以下导入
require('ace/ext/language_tools');
require('ace/multi_select');
Use under snippet as required
根据需要在代码段下使用
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
回答by Inferpse
Currently it's not available in any form. According to this issue: https://github.com/ajaxorg/ace/issues/1031
目前它不以任何形式提供。根据这个问题：https: //github.com/ajaxorg/ace/issues/1031
Autocomplete is only available in Cloud9 IDE (which is based on ACE) and may be available lateras a separate plugin for ACE Editor.
Autocomplete 仅在 Cloud9 IDE（基于 ACE）中可用，稍后可能会作为 ACE Editor 的单独插件提供。
