如何触发角色自动完成 - Ace Editor

Question

如何使用 Ace Editor 执行以下操作。

1. 用户输入“@”字符
2. 弹出自动完成功能
3. 用户从下拉列表中进行选择
4. 选择完成后，“@”将被删除

我基本上希望 @ 作为自动完成的触发器，但我不希望它在之后徘徊。

谢谢你

Answer 1

addAutoComplete() {
    var me = this;
    ace.require('./config').loadModule('ace/ext/language_tools', () => {
        this.aceEditor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: false
        });
        me.include = /[a-z.]/i;
        this.aceEditor.on('change', (obj, editor) => {
            switch (obj.action) {
                case 'insert':
                    let lines = obj.lines;
                    let char = lines[0];
                    if ((lines.length === 1) && (char.length === 1) && me.include.test(char)) {
                        setTimeout(() => {
                            me.aceEditor.commands.byName.startAutocomplete.exec(me.aceEditor);
                        }, 50);
                    }
                    break;
            }
        });
    });
}

这就是演示。工作正常

Answer 2

我们可以绑定'@'关键字并触发自动完成：

 editor.commands.addCommand({
        name: "myCommand",
        bindKey: { win: "@", mac: "@" },
        exec: function (editor) {
              autocomplete();
        }
 });

  autocomplete: function () {
        staticWordCompleter = {
            var getWordList = function(editor, session, pos, prefix, callback, isRHSEditor) {
            var wordList = []; // add your words to this list

            callback(null, wordList.map(function(word) {
            return {
                 caption: word,
                value: word
            };
   }));
  editor.completers = [staticWordCompleter];
}

Answer 3

以上方法都不适合我。我最终推出了自己的自动完成/自动建议以使其发挥作用。很难举出一个例子，但简而言之，步骤是：

1. 捕获编辑器的onChange
2. 如果编辑器操作满足条件（即按下@符号），则在光标位置显示一个框。这可以通过将框设置为绝对位置并设置顶部/左侧属性来完成：

const {row, column} = window.editor.getCursorPosition();
const {pageX, pageY} = window.editor.renderer.textToScreenCoordinates(row, column)
const autosuggest = document.getElementById("ELEMENT_NAME")
autosuggest.style.left = pageX
autosuggest.style.top = pageY

3. 添加命令以禁用/重定向任何操作（例如箭头键/回车键），并在做出选择时重新启用。

function disableEnterKeyInEditor() {
    editor.commands.addCommand(commmand_enter);
}

function enableEnterKeyInEditor() {
    editor.commands.removeCommands(commmand_enter);
}

command_enter = {
    name: "enterKeyPressedCommand",
    bindKey: {win: "Enter", mac: "Enter"},
    exec: function (editor) {
        return true;
    }
};

这比使用 ace 的自动完成功能要容易得多。

Answer 4

使用最新版本的ace就可以使用

triggerCharacters

下面的代码将触发自动完成弹出窗口

@

    const completer = {
        getCompletions: function (editor, session, pos, prefix, callback) {
            
            callback(
                null,
                autoCompletes.map((word) => ({ value: word, score: 1000, meta: "components" }))
            );
        },
        triggerCharacters: ["@"],
    };

完整示例JSfiddle

Answer 5

您可以通过以下代码查看：

var getWordList = function(editor, session, pos, prefix, callback, isRHSEditor) {
    var wordList = [];
    if(prefix === '@') {
        wordList.push('add you're name list here');
    }
    callback(null, wordList.map(function(word) {
        return {
            caption: word,
            value: word
        };
    }));
}