如何在Ace编辑器中以编程方式添加代码段？

本文介绍了如何在Ace编辑器中以编程方式添加代码段？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想将自己的自定义代码段添加到ace编辑器输入框中。 我将如何添加它们？ 来自有关代码段的Ace编辑器：我看到了一个名为 ace-snippet-extension ，但自2016年以来未进行过更新，除了简单地允许我添加一个代码段之外，它还做了很多其他事情。 p> 此外，我使用的是ES6 + / ES2015 +，因此require语句也令人困惑。 这是结果我正在寻找： 后显示文本 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: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编辑器中以编程方式添加代码段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！