如何在Ace编辑器中以编程方式添加代码段？ [英] How do I programmatically add a snippet in Ace Editor?

问题描述

我想将自己的自定义代码段添加到ace编辑器输入框中。

我将如何添加它们？

来自有关代码段的Ace编辑器：

当前，这是向项目添加自定义代码段的唯一方法是创建一个插件（如此处所述）。

我看到了一个名为 ace-snippet-extension ，但自2016年以来未进行过更新，除了简单地允许我添加一个代码段之外，它还做了很多其他事情。 p>

此外，我使用的是ES6 + / ES2015 +，因此require语句也令人困惑。

这是结果我正在寻找：

< img src = https://i.stack.imgur.com/MLc8M.png alt = Ace编辑器，在按Ctrl + Space>

后显示文本 build的摘要建议

解决方案

经过研究，我从ace-snippet-extension中提取了有用的位。另一个棘手的部分是，代码片段似乎需要某种类型的缩进，这是我为之准备的功能（但是未经充分测试）

此处是库的代码，名为 ace-snippets-extension-simple.js ：

 从'ace-builds'中导入ace 
 
导出const registerSnippets = function（editor，session，mode，snippetText）{
 editor.setOptions（{
 enableBasicAutocompletion：true，
 enableSnippets：true，
}）
 
 var snippetManager = ace.require（'ace / snippets'）。snippetManager 
 
 var id = session。$模式。$ id || ''
 var m = snippetManager.files [id] 
 
 m.scope =模式
 m.snippetText = snippetText 
 m.snippet = snippetManager.parseSnippetFile（snippetText ，m.scope）
 
 snippetManager.register（m.snippet，m.scope）
} 
 
 export const createSnippets = snippets => 
（Array.isArray（snippets）？代码段：[代码段]）
 .map（（{{name，code}）= >> 
 [
'snippet'+名称， 
代码
 .split（'\n'）
 .map（c =>'\t'+ c）
 .join（'\n'） ，
] .join（'\n'）
）
 .join（'\n'）
  

以下是消费者代码的示例：

使用此代码导入以上内容。

 从'ace-builds'导入ace 
 import {Range，EditSession}从'ace-builds'
 import'ace -builds / src-noconflict / ext-language_tools'
 import'ace-builds / src-noconflict / mode-javascript'
 import'ace-builds / webpack-resolver'
 
从'./ace-snippets-extension-simple'
 
 const editor = ace.edit（/ * HTMLElement）导入{
 registerSnippets，
 createSnippets，
}参考或CSS选择器字符串* /）
 
 // ... 
 // ... 
 // // 
 
 editor.setOptions（{
 enableBasicAutocompletion：true，
 enableSnippets：true，
 enableLiveAutocompletion ：false，
}）
 
 editor.setTheme（'ace / theme / monokai'）
 editor.session.setMode（'ace / mode / javascript'）
 
 registerSnippets（
编辑器，
 editor.session，
'javascript'，
 createSnippets（[
 {name：'build'，code：' console.log（ build）'}，
 {名称：'destroy'，代码：'console.log（ destroy）'}，
]）
）
  

I want to add my own custom code snippets to my ace editor input box.

How would I go about adding them?

From the documentation of Ace editor regarding snippets:

Currently, the only way to add custom snippets to a project is to create a plugin (as described here).

I saw a project called ace-snippet-extension but it has not been updated since 2016, and does more things than simply allowing me to add a snippet.

Additionally, I am using ES6+/ES2015+, so the require statements are confusing as well.

This is the result I'm looking for:

解决方案

After some research, I extracted the useful bits out of the ace-snippet-extension. Another tricky part is that snippets seem to require a certain type of indentation, which I've made a function for (not well-tested however)

Here is the 'library' code, named ace-snippets-extension-simple.js:

import ace from 'ace-builds'

export const registerSnippets = function(editor, session, mode, snippetText) {
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
    })

    var snippetManager = ace.require('ace/snippets').snippetManager

    var id = session.$mode.$id || ''
    var m = snippetManager.files[id]

    m.scope = mode
    m.snippetText = snippetText
    m.snippet = snippetManager.parseSnippetFile(snippetText, m.scope)

    snippetManager.register(m.snippet, m.scope)
}

export const createSnippets = snippets =>
    (Array.isArray(snippets) ? snippets : [snippets])
        .map(({ name, code }) =>
            [
                'snippet ' + name,
                code
                    .split('\n')
                    .map(c => '\t' + c)
                    .join('\n'),
            ].join('\n')
        )
        .join('\n')

Here is an example of the "consumer" code:

Use this to import the above.

import ace from 'ace-builds'
import { Range, EditSession } from 'ace-builds'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/webpack-resolver'

import {
    registerSnippets,
    createSnippets,
} from './ace-snippets-extension-simple'

const editor = ace.edit(/*HTMLElement reference or css selector string*/)

// ...
// ...
// ...

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false,
})

editor.setTheme('ace/theme/monokai')
editor.session.setMode('ace/mode/javascript')

registerSnippets(
    editor,
    editor.session,
    'javascript',
    createSnippets([
        { name: 'build', code: 'console.log("build")' },
        { name: 'destroy', code: 'console.log("destroy")' },
    ])
)

这篇关于如何在Ace编辑器中以编程方式添加代码段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！