ace Custom Online Editor Method and Tips

Keywords: github npm git Makefile

ace is an excellent open source online code editor
github Download Address:

  1. Download source > Open command line window - git clone
    2. Enter ace-demo directory, each html page has different functions, you can test and see for yourself.
    But when you open the autocompletion.html page, you report the following error
couldn't find ace.js file,
to build it run node Makefile.dryice.js full

Because we need to compile ace source code.
3. Compile ace source code. Look at the file in the ace root directory and compile it as follows.

Building Ace

You do not generally need to build ACE. The [ace-builds repository]( 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:

npm install
node ./Makefile.dryice.js

4. Change the autocompletion. HTML (Autoprompt + Lenovo) file

<!DOCTYPE html>
<html lang="en">
  <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;

<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>
    // trigger extension
    var editor = ace.edit("editor");
    // enable autocompletion and snippets
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true

<script src="./show_own_source.js"></script>

Posted by ready2drum on Thu, 10 Oct 2019 01:35:18 -0700