ace自定义在线编辑器方法及提示

ace是一款优秀的开源在线代码编辑器
github下载地址：https://github/ajaxorg/ace

下载源码>打开命令行窗口- git clone https://github/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/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文件，可以看到自定义的方法及提示了

更多推荐

ace自定义在线编辑器方法及提示