ACE 编辑器中的自动补全
Posted
技术标签:
【中文标题】ACE 编辑器中的自动补全【英文标题】：Autocompletion in ACE editor 【发布时间】：2012-11-12 18:48:36 【问题描述】：我发现了类似的问题：Ace Editor autocomplete and multiple languages
但响应是 ACE 不支持自动完成功能，并且根据Google group for Ace Editor“这是我对 Ace 的希望，我们绝对需要它 Cloud9"。
这篇文章已经有一年了，正如你所见，cloud9 现在支持自动补全： https://c9.io/site/features/
那么，Ace 编辑器默认提供自动补全功能吗？我找不到任何有关它的信息。
【问题讨论】：
相关问题：How to add my own completer in ace editor 【参考方案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找到一个演示
这是我刚刚写的关于该主题的 wiki 页面：
https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
【讨论】：
这很好，但只是一个简单的问题，其余的文档在哪里？我想为乳胶写一些 sn-ps 并且我卡住了，我将如何为 \begin... 之类的东西写 sn-ps，它后面可以有 10 种不同的东西？在这里查看可能性：github.com/mercutiodesign/texmaker-3.3.3/blob/master/completion/… 我不敢相信官方网站上没有更好的文档......非常感谢，我搜索了很长时间，直到找到你的答案setOptions() 方法对我不起作用。我不得不使用editor.setOption("enableBasicAutocompletion", true);。仅供参考，我在带有代理对象的应用程序包装器中使用它，因此翻译中可能会丢失一些东西。
@mike 请参阅下面的my answer - 您可以传递实现getCompletions() 的对象，而不是enableBasicAutocompletion 中的布尔值。【参考方案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) 包含以下脚本（请参阅我的 cmets 以了解它们）：
<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>
【讨论】：
谢谢。我不得不打电话给setOption() 而不是setOptions(enableBasicAutocompletion: true)。我使用 editor.getOptions() 和 editor.getOption("enableBasicAutocompletion") 来检查该值是否已实际设置，并且它都与editor.setOption("enableBasicAutocompletion", true); 一起使用
截至 2018 年 7 月 26 日，这对我有效，适用于 Ace v1.3.3。 enableLiveAutocompletion: false 需要按 Ctrl + Space 来显示建议。 enableLiveAutocompletion: true 在输入一些字母后显示建议。也不是所有的模式都有建议：例如，html 有，而pascal 没有。【参考方案3】：
Ace 本身仍不支持自动补全功能，但我们已经为基于 Ace 且完全开源的 Codiad IDE 实现了一个组件。 您可以在Github 上查看代码，它一定会帮助您编写自己的代码。
【讨论】：
我可以在那里看到一些很棒的作品。我查看了您的init.js 文件。您能否帮助我了解如何将这个东西集成到 Ace 中？它在哪里/如何加载？
它没有集成到到 Ace 中，更像是我们在其上添加的组件。我们拦截键盘快捷键 (Ctrl+Space) 并打开一个弹出窗口，我们会在其中填写建议。我们使用 Ace api 从文档中获取文本以构建建议并最终插入建议文本。看看 'keybindings' 组件，它可能会有所帮助。
非常感谢您的建议！我一定会看看的。 :-)
注意，这个说法不再正确。 Ace 现在确实提供了完成功能，通过 enableBasicAutocompletion 选项启用了 language_tools 扩展。【参考方案4】：
注意，要实现自定义完成逻辑，您可以在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>
信息source
另请参阅 this 和 this 答案
【讨论】：
【参考方案5】：AjaxOrg 已在其 Cloud9 存储库中推送了一个提交，并带有以下消息：
代码补全插件
我认为这就是这个问题的答案。
Here 是提交。
另外，我认为this 是一个可以帮助我们的好项目。
更多信息，我们可以关注this issue opened in Cloud9 repository的消息。
【讨论】：
【参考方案6】：确保有以下导入
require('ace/ext/language_tools');
根据需要在sn-p下使用
editor.setOptions(
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
);
【讨论】：
为什么需要 multi_select？ @Jamessaystrytopanswers.xyz 我记不太清了，但我认为你是对的，我们不需要 multi_select。我想我在粘贴答案时也复制了它【参考方案7】：目前它不以任何形式提供。根据这个问题： https://github.com/ajaxorg/ace/issues/1031
自动完成功能仅在 Cloud9 IDE（基于 ACE）中可用，并且可能稍后作为 ACE 编辑器的单独插件提供。
【讨论】：
您能否告诉我另外两件事：cloud9 是否开源（或者它的某些功能不是开源的？）并且不要创建单独的问题 - 如果您知道 - cloud9 是什么库gui写的？ 1) 是的，某些功能不是开源的 2) 他们使用自己的 UI 框架 - ui.ajax.org 基于Ace的小黄瓜编辑器好像有。 github.com/cucumber/gherkin-editor/blob/master/public/js/… 是的，但这已经很久没有更新了，我不确定它是否与当前的 ACE 版本兼容。这只是 ACE 的基本自动完成引擎 - 因此您必须为每种语言编写自动完成选项才能使其正常工作。【参考方案8】：将此添加到您的挂载中：
this.aceEditor.setOptions(
enableSnippets: true,
enableLiveAutocompletion: true,
enableBasicAutocompletion: true
)
【讨论】：
请添加一些解释为什么这些行会有所帮助。以上是关于ACE 编辑器中的自动补全的主要内容，如果未能解决你的问题，请参考以下文章