在Monaco-editor中实现自定义代码提示,可以通过注册一个自定义的CompletionItemProvider来完成。以下是一个详细的步骤指南,包括理解Monaco-editor的代码提示机制、查阅官方文档、编写自定义代码提示逻辑、集成测试以及优化调整的过程。 1. 理解Monaco-editor的代码提示机制 Monaco-editor的代码提示机制基于Language Server Protoc...
push({ label: sqlStr[i], // 显示的提示内容 kind: monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标 insertText: sqlStr[i], // 选择后粘贴到编辑器中的文字 detail: '', // 提示内容后的说明 range: range }); } } return { suggestions: suggestions }; }...
我在业务中需要使用自定义提示的功能,主要参考了这篇文章,自定义提示需要用monaco.languages.registerCompletionItemProvider注册,但我注册了提示性,并使用editor.trigger('提示', 'editor.action.triggerSuggest', {});这句话触发提示项,却没有得到预想的效果,而一直是一个空的提示框。
@Watch('hints') triggerSuggest(newVal) {//当提示项非空时,触发提示,能够使提示项更新并显示if(newVal.length > 0)this.monacoEditor.trigger('提示', 'editor.action.triggerSuggest', {}); } }
注意:自定义提示时一定需设置 language: 'plaintext' 自定义文本, 并且在monaco.languages.registerCompletionItemProvider中使用深拷贝 经过以上步骤 编辑器就能正常应用到项目中去了,使用及自定义提示的使用方法: importReact,{useRef,useEffect,forwardRef,useImperativeHandle}from'react';import{Icon,Tooltip}from'choero...
这次接到一个需求,要在浏览器的IDE中支持自定义提示功能,如下所示: 成都创新互联主要从事网站建设、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务东源,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配...
四、自定义提示 monaco.languages.registerHoverProvider('mylanguages', { // 光标移入提示功能 provideHover: function (model, position, token) { const lineword = model.getLineContent(position.lineNumber) // 获取光标悬停所在行的所有内容 const word = model.getWordAtPosition(position)?.word // 获取光...
这次接到一个需求,要在浏览器的IDE中支持自定义提示功能,如下所示: 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项。 项目的框架是Vue,编辑器用的是Monaco Editor。 什么是Monaco Editor vscode是我们经常在用的编辑器,它的前身是微软的一个叫Monaco Workbench的项目,而Monaco Editor就是...
Vue引入代码代码编辑器monaco-editor并自定义语法提示 Vue引⼊代码代码编辑器monaco-editor并⾃定义语法提⽰ 介绍 说起`monaco-editor` 可能⼤半部分⼈都没⽤过，但是说起vsCode我相信⼤部分前端都多多少少⽤过吧，说⽩了这玩意就是vscode的同胞兄弟，很久以前微软公司有个叫 Monaco Workbench的项⽬，...
});//设置自定义主题monaco.editor.setTheme('BlackTheme');//创建编辑器editor = monaco.editor.create(document.getElementById('container'), {value:'',language:'python',theme:'BlackTheme',automaticLayout:true, fontSize :'20px', });// 创建代码提醒monaco.languages.registerCompletionItemProvider('pyt...