web-dev-qa-db-ja.com

AceEditorが手動でスニペットを追加する

TL; DR

従来のアプローチ（キーボードキー）ではなく、関数呼び出しを介してエースエディタースニペットを手動でトリガーしようとしています。

説明

エディターとスニペット文字列をパラメーターとして受け取り、そのスニペットをエディターに追加する関数が必要です。 function addSnippet(editor, snippet)。

エースエディターはTextMate風のスニペットをサポートしています。

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

したがって、この関数を呼び出すと、スニペットが追加され、スニペットマーカーが強調表示され、最初のマーカーが選択されます。最初のマーカーを入力してタブを押した後、エディターは次のスニペットマーカーに移動する必要があります。 Kitchen Sink の例のように（ただし、代わりに関数呼び出しを介してスニペットを追加/トリガーしたい）。

私は自分の道をハッキングしてみて、 この関数 を作成しました。しかし、それは厄介で不完全です（マーカーとタブプレスをサポートしていません）。このためのネイティブな方法はありますか？ snippetManagerを使用した例をいくつか見てきましたが、手動機能ではなく、キーボードトリガーを使用しています。

この問題に関する助けをいただければ幸いです。ありがとう。

javascriptcode-snippetsace-editor
16
Ali Ashraf

何時間ものハッキングと調査の後、私はついにext-language_tools.jsのinsertSnippetのsnippetManager関数に出くわしました。これは次のように機能します。

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

実際にはかなり簡単ですが、ドキュメントが不足しているため、以前は見つけることができませんでした。

29
Ali Ashraf

RequireJSを使用しない場合は、次の構文も機能します。

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

スニペットを追加するには、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";

詳細については、以下を確認してください。

2
Dennis Vash