Question

我设法让我的代码片段使用基本的自动完成功能：

ace.define("ace/snippets/bosun",["require","exports","module"], function(require, exports, module) {

exports.snippets = [
    /* Sections */
    {
        name: "alert definition",
        tabTrigger: "alertdef",
        content: 
"alert ${1:alertname} {\n\
    warn =\n\
}\n"
    },
    {
        name: "template def",
        tabTrigger: "templatedef",
        content: 
"template ${1:templatename} {\n\
    subject =\n\
}\n"
    },

    /* Funcs */
    {
        name: "avg reduction function",
        tabTrigger: "avg",
        content: "avg(${1:seriesSet})"
    }
]

exports.scope = "bosun";

});

在有关代码段的文档中，它说：

通过菜单或命令触发代码段时，您可以进行配置它使用在插入片段之前选择的文本结果代码。

但我不清楚如何创建菜单来列出这些片段？（理想情况下，菜单中包含每个类别片段的子菜单，但很高兴首先抓取...）

Answer 1

也许有人有更好的方法。但是，通过阅读https://github.com/ajaxorg/ace/blob/master/lib/ace/snippets.js中的代码，我得出了：

$scope.aceLoaded = function (_editor) {
    editor = _editor;
    $scope.editor = editor;
    editor.$blockScrolling = Infinity;
    editor.focus();
    editor.getSession().setUseWrapMode(true);
    $scope.snippetManager = ace.require("ace/snippets").snippetManager;
    $scope.bosunSnippets = $scope.snippetManager.snippetNameMap["bosun"];
    editor.on("blur", function () {
        $scope.$apply(function () {
            $scope.items = parseItems();
        });
    });
};

$scope.listSnippets = function() {
    var snips = $scope.snippetManager.snippetNameMap["bosun"];
    if (snips) {
        return Object.keys(snips)
    }
    return {};
}

$scope.insertSnippet = function(snippetName) {
    $scope.snippetManager.insertSnippetForSelection($scope.editor, $scope.snippetManager.snippetNameMap["bosun"][snippetName].content);
    $scope.editor.focus();
    $scope.editor.tabstopManager.tabNext()
}

这似乎有用，也许有更好的方法。

如何使用Ace编辑器制作一个Snippets菜单？

1 个答案: