手机版

在vue中实现摩纳哥编辑器的自定义提示功能

时间:2021-08-21 来源:互联网 编辑:宝哥软件园 浏览:

这一次,我在浏览器的IDE中收到了支持自定义提示功能的请求,如下图所示:

可以看到,可以根据用户输入的内容逐一排除,只显示完全匹配的。

项目框架是Vue,编辑是摩纳哥编辑。

什么是摩纳哥编辑

Vscode是我们经常使用的编辑器。它的前身是一个名为摩纳哥工作台的微软项目,而摩纳哥编辑器是一个从这个项目发展而来的网页编辑器。他们的大部分代码都是共享的,所以摩纳哥编辑器和VSCode在编辑代码、交互和UI方面几乎完全相同。不同的是平台不同。摩纳哥编辑器是基于浏览器的,而VSCode是基于电子的,所以VSCode的功能更健壮,性能更强大。

使用

装置

使用npm安装摩纳哥-编辑器-保存

div id=' Monaco ' class=' Monaco-editor '/div import * as Monaco from ' Monaco-editor ';this . file editor=this . Monaco . editor . create(document . getelementbyid(' Monaco '),{value: null,language : ' sql '//这里以SQL为例})this . file editor . dispose();//使用后破坏这里介绍的摩纳哥。请注意,摩纳哥是通过以下方式引入react的:

从‘Monaco-editor/ESM/vs/editor/editor . API’导入* as monaco实现自定义提示功能

查看数据后发现,摩纳哥有一个registerCompletionItemProvider方法,实现如下:

this . Monaco . languages . registercompletionimprovider(' sql ',{//这里以SQL语言为例,providecompletionitems(){ return[{ label : ' $ { _ db ',//显示的提示内容kind : this . Monaco . languages.completionitem kind[' function '],//用于在提示内容之后显示不同的图标insert text 3360 ' { db ',//所选文本detail3360 ' '粘贴到编辑器中//description之后}];},触发字符:[' $ ']//触发提示的字符可以写多个数字});尝试了上面的用法后,我发现虽然triggerCharacters的值是一个数组,可以有很多个,但是里面的字符串只能识别一个字符。最初的要求是在输入$ { _ }后提示${_DB。但是由于无法识别多个字符,只能在出现$时提示。

另一个问题是registerCompletionItemProvider的第一个参数只能是一个字符串。如果有多种语言,只能叠加重复。恰好我的需求是有多种语言,所以只能这样解决,就是每种语言写一次:

['json ',' yaml ',' php ',' go ',' sql ',' java ',' markdown ','明文']。map(item={ this . Monaco . languages . registercompletionimprovider(item,{ provideCompletionItems(){ return[{ label : ' $ { _ DB ',kind : this . Monaco . languages.completionitemckind[' Function '],inserttext : ' { DB ',detail : ' ' });},triggercharacters 3360[' $ ']});});要求是${_DB:key:value,也就是输入${_DB后,输入:提示键,键后输入:提示值。

这里还有一个问题。需要知道当前输入内容才能判断是$还是:触发提示的两个符号与:相同,无法区分。你只能通过识别:的位置来判断是提示键还是值,所以你也应该知道:之前的当前输入内容。

然后,只在provideCompletionItems步骤中判断,但检查数据后没有发现这样的参数。provideCompletionItems只有几个参数,如模型、位置和标记。后来发现模型中的getLineContent方法可以得到指定行的所有内容,而position可以得到当前输入行的行数和列数,所以有以下解决方案:

this . Monaco . languages . registercompletionimprovider(item,{ provideCompletionItems (model,Position) {//获取当前行号const line=position。line number//获取当前列号const column=position.column //获取当前输入行的所有内容const content=model . getline content(line)//通过下标获取当前光标后的下一个内容。也就是说,刚刚输入的content const sym=content[column-2]if(sym===' $ '){ return[{ label : ' $ { _ db ',kind : this . Monaco . languages.completionitemckind[' Function '],insert text : ' _ } return[{ label : ' 3: abb ',kind 3: this . Monaco . languages.completionitemckind[' Function '],insertText: ' abb ',},triggercharacters 3360[' $ ',' : ']});如果你能得到光标之后的第一个内容,你就能得到下面的内容。如果您识别出先前的内容是${_DB,系统将提示您输入密钥,否则系统将提示您输入值。

最后一定要多看文献,勤于测试就能解决问题~

摘要

以上是边肖介绍的摩纳哥编辑器自定义提示功能在vue中的实现。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!如果你觉得这篇文章对你有帮助,请转载,请注明出处,谢谢!

版权声明:在vue中实现摩纳哥编辑器的自定义提示功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。