集成代码编辑器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里的实现，需要根据实际情况修改。