如何在角色上触发自动完成 - 王牌编辑器

Question

如何使用 Ace 编辑器执行以下操作。

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. 捕获编辑器的更改
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
        };
    }));
}