javascript Ace Editor 手动添加片段

Ace Editor manually adding snippets

提问by Ali Ashraf

TL;DR

TL; 博士

I am trying to manually trigger ace editor snippets through a function call, rather than the conventional approach (keyboard keys).

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

Explanation

解释

I need a function that takes in the editor and a snippet string as the parameters, and adds that snippet to the editor. function addSnippet(editor, snippet).

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

Ace editor supports TextMate-ish snippets.

Ace 编辑器支持 TextMate 风格的片段。

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

So when we call this function, it should add the snippet, highlight the snippet markers and select the first one. After filling the first one and hitting tab, the editor should move to the next snippet marker. Just like in the Kitchen Sinkexample (but I want to add/trigger snippets via a function call instead).

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

I tried hacking my way through and made this function. But it's messy and incomplete (doesn't support markers and tab presses). Is there any native method for this? I've seen a few examples using snippetManager, but they use keyboard triggers, not manual functions.

我尝试破解我的方法并实现了这个功能。但它是凌乱和不完整的（不支持标记和制表符）。是否有任何本机方法？我见过一些使用 的示例snippetManager，但它们使用键盘触发器，而不是手动功能。

Any help regarding this issue would be appreciated. Thanks.

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

回答by Ali Ashraf

After hours of hacks and research, I finally came across the insertSnippetfunction of snippetManagerin ext-language_tools.js, it works this way:

经过数小时的黑客和研究，我终于遇到了in的insertSnippet功能，它是这样工作的：snippetManagerext-language_tools.js

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

Pretty easy actually, couldn't find it earlier due to lack of documentation.

实际上很容易，由于缺乏文档而无法更早地找到它。

回答by user2513149

If you don't use RequireJS then the following syntax works as well:

如果您不使用 RequireJS，那么以下语法也适用：

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

回答by Dennis Vash

Use ace.define(...)for adding your snippet. The snippets are written in tex-likelanguage.

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

• For Snippet defined at ./src/lib/json-snippet.js:

• 对于定义在的代码段./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");
});

• Use brace/mode/{filetype}, brace/snippets/{filetype}for defining file type and it snippets.

• Find existing snippets at node_module/brace/snippets/for overriding.

• 使用brace/mode/{filetype},brace/snippets/{filetype}定义文件类型和它的片段。

• 查找现有的片段以node_module/brace/snippets/进行覆盖。

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

For more information check out:

有关更多信息，请查看：

• Demo
• Thisrepository

• 演示
• 这个存储库