Integrate the experience of the Code Editor ACE and the code editor ace

Integrate the experience of the Code Editor ACE and the code editor ace

ACE is one of the most popular online code editors. ACE is also used in the CanTK integrated development environment GameBuilder. ACE is very powerful, but due to improper use, it is reported that the GameBuilder code editor is not easy to use. Recently, it took some time to complete it. here we will write out the problems for your reference.

1. The code displayed in Linux is inconsistent with the input.

The Code display in Fedora is inconsistent with that in the input. in the horizontal direction, the input position is twice that in the Code display. This problem has plagued me for a long time, and it makes the code editor unusable. Upgrading the operating system and ACE to the latest version cannot solve this problem, and most websites that use ACE have this problem. It was later found that it was a font problem. It was okay to use the edgefonts font. However, frequent access to use.edgefonts.net in China Times out, And the https://use.edgefonts.net/source-code-pro.jsand fonts must be taken to the render server.

2. The code is automatically supplemented.

ACE supports code auto-completion. There are also articles on the Internet. But in actual use, there are two points worth noting:

1. Data FormatThe following code registers a Completer. The callback function passes the prepared data to the ACE. The ACE will automatically match according to the current input, so no pre-filtering is required here.

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 is an array. each item is similar to the following structure:
{"Meta": "function", "caption": "addShape", "value": "addShape", "score": 1 },

Meta: displays on the right of the prompt box, for example ).
Caption: displayed on the left side of the prompt box (for example ).
Value: Actually inserted data.
Score: indicates the priority, with the highest priority at the top.

1. Shortcut KeysThe shortcut key for enabling completion is Ctrl + Space. In Chinese Windows, it is in conflict with the shortcut key for the on/off input method. This can enable the enableLiveAutocompletion option, or modify the 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. Full Screen Editing

ACE must be edited in full screen mode. The full screen mode is not the real full screen mode, but the browser window is full. Use Ctrl + Enter to switch between full screen and non-full screen.

    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";        }    }});

The above code is implemented in GameBuilder and needs to be modified according to the actual situation.