javascript - 在 Ace 编辑器中自动完成 XML 值和属性

Question

我希望自动完成 XML 标记和属性。有效值将来自服务器。例如，

如果我有一个标签，例如，

<status></status>

我的光标在开始和结束标签内，我想点击 control + space 并且只有有效值出现在下拉列表中。如:ok, error, warning, ...

与属性类似，

<status audience="">ok</status>

如果我的光标聚焦在引号内，我希望只有有效的受众在点击 control + space 时出现在下拉列表中。

这是我目前所拥有的。这个完成者完成我正在输入的单词。我只是不知道如何知道我在里面的标签类型以及如何为该标签或属性发送特定值。

有什么想法或例子可以指点我吗？谢谢，/w

function loadEditor() {
    var langTools = ace.require("ace/ext/language_tools");
    editor = ace.edit("editor");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
    });
    editor.getSession().setMode("ace/mode/xml");

    var myCompleter = {
        getCompletions: function(editor, session, pos, prefix, callback) {
            if (prefix.length === 0) {
                callback(null, []);
                return;
            }                    
            $.getJSON("completions.php?a=completions&prefix=" 
                    + prefix + "&content=" + session, function(json) {
                callback(null, json.map(function(c) {
                    console.log("value: " + c.value);
                    return {value: c.value, caption: c.caption, meta: c.meta, score:c.score};
                }));
            })
        }
    };
    langTools.addCompleter(myCompleter);
}

Answer 1

编辑器内置的分词器可用于识别标签和属性名称。

var attributeCompleter = {
    getCompletions: function(editor, session, position, prefix, callback) {
        var results = [];

        var token = editor.session.getTokenAt(position.row, position.column);

        if (token.type === "string.attribute-value.xml") {
            var tokens = editor.session.getTokens(position.row);
            var tag, attribute;

            for (i = 0; i < tokens.length; i++) {
                if (token.index <= tokens[i].index) {
                    break; // note tokens[i].index may be undefined
                }
                switch (tokens[i].type) {
                case "meta.tag.tag-name.xml":
                    tag = tokens[i];
                    break;
                case "entity.other.attribute-name.xml":
                    attribute = tokens[i];
                    break;
                }
            } // iteration has to be modified for xml tags divided over multiple lines
            
            if (tag.value === "status" && attribute.value === "audience") {
                results = [ { caption: "caption", value: "value", meta: "meta" } ];
            }
        }

        callback(null, results);
    }
};

请注意，标记器将结束引用 audience="example"<- 视为属性值的一部分。