통합 코드 편집기 ACE 경험

ACE는 가장 유행하는 온라인 코드 편집기 중 하나로, CanTK의 통합 개발 환경인 게임빌더에도 ACE를 사용했다.ACE의 기능은 매우 강하지만 사용 방법이 부적절하기 때문에 GameBuilder의 코드 편집기가 좋지 않다는 것을 반영한다.최근에 그것을 보완하는 데 시간이 좀 걸렸는데, 여기에 부딪힌 문제를 써서, 필요로 하는 친구들이 참고하도록 제공한다.

1. Linux에서 코드가 입력과 일치하지 않습니다.

Fedora의 코드 표시는 입력과 일치하지 않습니다. 수평 방향에서 입력 위치는 코드 표시의 배입니다.이 문제는 나를 오랫동안 괴롭혔다. 코드 편집기를 아예 사용할 수 없게 했다.운영체제와 ACE를 최신 버전으로 업그레이드해도 이 문제를 해결할 수 없을 뿐만 아니라 대부분 ACE를 사용하는 사이트에서도 이 문제가 있다.나중에 글씨체가 문제라는 것을 발견하고 엣지폰트의 글씨체를 사용하면 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에서 스위치 입력법의 단축키와 충돌합니다.이것은 enable Live Autocompletion 옵션을 켜거나 ext-languagetools.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에서 구현한 것으로 실제 상황에 따라 수정해야 합니다.