ace是一款优秀的开源在线代码编辑器
github下载地址:https://github.com/ajaxorg/ace
- 下载源码>打开命令行窗口- git clone https://github.com/ajaxorg/ace.git
2.进入ace-demo目录,每个html页面有不同的功能,可以自己测试看一下。
但是打开autocompletion.html页面时,报错如下
couldn't find ace.js file,
to build it run node Makefile.dryice.js full
是因为我们需要编译ace源码。
3.编译ace源码。查看ace根目录下的Readme.md文件,按如下方式进行编译。
Building Ace
-----------
You do not generally need to build ACE. The [ace-builds repository](https://github.com/ajaxorg/ace-builds/) endeavours to maintain the latest build, and you can just copy one of _src*_ subdirectories somewhere into your project.
However, all you need is Node.js and npm installed to package ACE. Just run `npm install` in the ace folder to install dependencies:
```bash
npm install
node ./Makefile.dryice.js
4.更改autocompletion.html(自动提示+联想)文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ACE Autocompletion demo</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<pre id="editor"></pre>
<!-- load ace -->
<script src="../build/src/ace.js"></script>
<!-- load ace language tools -->
<script src="../build/src/ext-language_tools.js"></script>
<script>
// trigger extension
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/html");
editor.setTheme("ace/theme/tomorrow");
// enable autocompletion and snippets
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
<script src="./show_own_source.js"></script>
</body>
</html>
5.自定义方法及提示(以python语法文件为例)
打开ace-lib-ace-snippets-python.snippets文件,在文件末尾添加你自定义的方法,如下图
更改完后重复第三步编译操作。
6,重新打开autocompletion.html文件,可以看到自定义的方法及提示了