集成代码编辑器ACE的经验

ACE是最流行的在线代码编辑器之一，在CanTK的集成开发环境GameBuilder里也使用了ACE。ACE的功能非常强大，但是由于使用方法不当，大家反映GameBuilder的代码编辑器不好用。最近花了点时间去完善它，这里把遇到的问题写出来，供有需要的朋友参考。

1.Linux下代码显示与输入不一致。

Fedora下代码显示与输入不一致，水平方向上，输入位置是代码显示的一倍。这个问题困扰了我很久，它让代码编辑器根本没法使用。升级操作系统和ACE到最新版本，也无法解决这个问题，而且大部分使用ACE的网站都有这个问题。后来发现是字体的问题，使用edgefonts的字体就OK了。但是国内访问use.edgefonts.net经常超时，需要把https://use.edgefonts.net/source-code-pro.js及字体取到本地服务器上。

2.代码自动补全。

ACE支持代码自动补全，网上也有文章介绍。但是实际使用时，有两点值得注意：

1.数据格式下面的代码注册一个Completer，回调函数把准备的数据传递给ACE，ACE会自动根据当前的输入进行匹配，所以这里不需要预先过滤。

var tangideCompleter = {

    getCompletions: function(editor, session, pos, prefix, callback) {

        if (prefix.length === 0) {

            return callback(null, []);

        }else {

            return callback(null, autoCompleteData);

        }

    }

}

editor.setOptions({enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true});

var langTools = ace.require("ace/ext/language_tools");

langTools.addCompleter(tangideCompleter);

autoCompleteData是一个数组，每一项都类似于下面这个结构：

{“meta”:”function”, “caption”:”addShape”, “value”:”addShape”,”score”:1},

meta：显示在提示框的右边（如下图）。

caption：显示在提示框的左边（如下图）。

value：是实际插入的数据。

score：表示优先级，高的排在前面。

1.快捷键启用补全的快捷键是Ctrl+Space，在中文Windows下，与开关输入法的快捷键冲突。这个可以开启enableLiveAutocompletion选项，或者修改一下ext-language_tools.js:

Autocomplete.startCommand = {

name: "startAutocomplete",

exec: function(editor) {

    if (!editor.completer)

        editor.completer = new Autocomplete();

    editor.completer.autoInsert = false;

    editor.completer.autoSelect = true;

    editor.completer.showPopup(editor);

    editor.completer.cancelContextMenu();

},

bindKey: "Ctrl-Space|Ctrl-Shift-Space|Alt-Space|Ctrl-P"

};

3.全屏编辑

ACE的全屏编辑需要自己处理，这里全屏并非真正的全屏，只是占满浏览器的窗口。通过Ctrl+Enter进行全屏和非全盘切换。

    editor.commands.addCommand({

    name: "fullscreen",

    bindKey: {win: "Ctrl-Enter", mac: "Command-Enter"},

    exec: function(editor) {

        var vp = cantkGetViewPort();

        if(editor.isFullScreen) {

            div.style.width = editorW + "px";

            div.style.height = editorH + "px";

            div.style.position = "absolute";

            div.style.left = editorX + "px";

            div.style.top = (scrollTop + editorY) + "px";

            editor.resize();

            editor.isFullScreen = false;

            document.body.style.overflow = "auto";

        }

        else {

            div.style.width = vp.width+ "px";

            div.style.height = vp.height+ "px";

            div.style.position = "absolute";

            div.style.left = 0 + "px";

            div.style.top = (scrollTop + 0) + "px";

            editor.resize();

            editor.isFullScreen = true;

            document.body.style.overflow = "hidden";

        }

    }

});

以上代码是GameBuilder里的实现，需要根据实际情况修改。