ACE编辑器中的自动完成功能
Woj*_*ilo 35 javascript html5 autocomplete syntax-highlighting ace-editor
我发现了simmilar问题:Ace Editor自动完成和多种语言
但是回应是ACE不支持自动完成,并且根据 Google编辑组的Ace编辑说: "这是我对Ace的渴望,我们明确地需要它用于Cloud9".
这篇文章已经有一年了,正如你所看到的,cloud9现在支持自动完成:https://c9.io/site/features/
那么默认情况下Ace Editor中是否有自动完成功能？我找不到任何有关它的信息.
hwj*_*wjp 51
自动填充功能现已成为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
- 我无法相信在官方网站上没有更好的文档...非常感谢,我搜索了很长时间,直到找到你的答案 (4认同)
mau*_*lus 13
由于Autocomplete现在是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>
- 谢谢。我不得不调用`setOption()` 而不是`setOptions({enableBasicAutocompletion: true})`。我使用 editor.getOptions() 和 editor.getOption("enableBasicAutocompletion") 检查该值是否已实际设置，并且所有这些都与 `editor.setOption("enableBasicAutocompletion", true);` (2认同)
Art*_*sun 12
请注意，要实现自定义完成逻辑，您可以在 中传递完成提供程序对象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>
信息来源
Flo*_*ale 11
对于Ace来说,自动完成仍然不是原生的,但我们已经为Codiad IDE实现了一个基于Ace和完全开源的组件.您可以在Github上查看代码,它一定会帮助您编写自己的代码.
- 它没有像_into_ Ace那样集成,看起来更像是我们在它上面添加的组件.我们拦截键盘快捷键(Ctrl + Space)并打开一个我们填充建议的弹出窗口.我们使用Ace api从文档中获取文本以构建建议并最终插入建议文本.看看'keybindings'组件,它可能会有所帮助. (2认同)
确保有以下导入
require('ace/ext/language_tools');
根据需要在代码片段下使用
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
| 归档时间： |
|
| 查看次数： |
32909 次 |
| 最近记录： |