Question

TL; DR

我试图通过函数调用手动触发ace编辑器代码段，而不是传统的方法（键盘键）。

解释

我需要一个以编辑器和片段字符串作为参数的函数，并将该片段添加到编辑器中。 function addSnippet(editor, snippet)。

Ace编辑器支持TextMate-ish片段。

if (${1:condition_name}) {
     ${2:body}
}

因此，当我们调用此函数时，它应该添加代码段，突出显示代码段标记并选择第一个。填充第一个并点击标签后，编辑器应移至下一个片段标记。就像在Kitchen Sink示例中一样（但我想通过函数调用来添加/触发片段）。

我试图通过黑客攻击并制作this function。但它凌乱而且不完整（不支持标记和标签按下）。这有什么原生方法吗？我已经看过一些使用snippetManager的例子，但它们使用的是键盘触发器，而不是手动功能。

对此问题的任何帮助将不胜感激。感谢。

Answer 1

经过数小时的黑客攻击和研究后，我终于在insertSnippet中遇到了snippetManager ext-language_tools.js的{{1}}函数，它的工作原理如下：

var snippetManager = ace.require("ace/snippets").snippetManager;
snippetManager.insertSnippet(editor, snippet);

实际上非常简单，由于缺乏文档而无法提前找到它。

Answer 2

如果您不使用RequireJS，则以下语法也可以使用：

ace.config.loadModule('ace/ext/language_tools', function () {
    editor.insertSnippet(snippetText);
});

Answer 3

使用ace.define(...)添加您的代码段。片段以tex-like语言编写。

对于在./src/lib/json-snippet.js中定义的代码段：

// eslint-disable-next-line
const snippet = '# AddNode\n\
snippet addn\n\
    {\n\
        "nodeName": "${1:node_name}",\n\
        "algorithmName": "${2:algo_name}",\n\
        "input": []\n\
    }\n\
';

export default snippet;

// import your snippet
import snippet from "../lib/json-snippet";

// SUPER HACK FOR ADDING SNIPPETS
ace.define("ace/snippets/json", ["require", "exports", "module"], (e, t, n) => {
    // eslint-disable-next-line
    (t.snippetText = snippet), (t.scope = "json");
});

使用brace/mode/{filetype}，brace/snippets/{filetype}定义文件类型及其摘要。
在node_module/brace/snippets/上查找现有的摘要以进行覆盖。

import "brace/mode/json";
import "brace/snippets/json";
import "brace/ext/language_tools";

有关更多信息，请查看：

Demo
This存储库

Answer 4

其他答案似乎有点陈旧或相当老套。这对我在 v1.4.12 上使用实际的 Ace API 有效（尽管这似乎完全且令人沮丧地没有记录）。

const snippetManager = ace.require('ace/snippets').snippetManager;
const snippetContent = `
# scope: html
snippet hello
    <p>Hello, \${1:name}!</p>
`;
const snippets = snippetManager.parseSnippetFile(snippetContent);
snippetManager.register(snippets, 'html');

将 html 交换为您想要的任何范围。

在编辑器中键入“hello”，然后按 TAB 来触发代码段。

Ace Editor手动添加片段

4 个答案: