Monaco Editor 实现自定义C#方法的智能提示
下载安装： npm install monaco-editorindex.html内主体文件引入
MonacoEditor加载器文件：<script src="./node_modules/monaco-editor/dev/vs/loader.js"></script>配置编辑器文件：<script src="index.js"></script>C#自定义方法文件：<script src="csharpFn.js"></script>编辑器容器：<div id="container" style="height: 1000px; width:100%;"></div>
index.js配置
//初始化配置路径
var monacoEditor;
require.config({//设置插件引用路径
paths: {'vs': 'node_modules/monaco-editor/dev/vs'},
'vs/nls': { availableLanguages: {'*': 'zh-cn'}
}
});
//实例化绑定对象并赋值
require(['vs/editor/editor.main'], function() {
monacoEditor = monaco.editor.create(document.getElementById('container'), {
value: "public void",//初始化赋值
language: 'csharp',//编写的语言类型
wordWrap: "on", //自动换行，注意大小写
wrappingIndent: "indent",
theme: "vs-dark" //皮肤设置 vs vs-dark hc-black
});
//自定义监听输入编写语法/
monaco.languages.registerCompletionItemProvider('csharp', {
provideCompletionItems: function(model, position) {
//自定义匹配逻辑....
var textUntilPosition = model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column
});
var match = textUntilPosition.match(/\s*$/);
var suggestions = match ? createDependencyProposals() : [];
//点方法调用
if(textUntilPosition.charAt(textUntilPosition.length-1)=='.'){
//当是点时匹配自定义的方法 ...
}else{
return {suggestions: suggestions};
}
}
triggerCharacters: ['.'] // 写触发提示的字符，可以有多个
})
})
csharpFn.js C#自定义方法文件配置 function createDependencyProposals() {
return [
{
label: 'context', //显示的提示名称
insertText: 'context' //选择后粘贴到编辑器中的文字
},
{
label: 'BuyGoods()', //显示的提示名称
kind: 1,//图标显示类型
insertText: 'BuyGoods(CSTradeScriptContext context, StockPrice price)',
childs: [//该方法的子类方法，可通过点语法调用
{
label: 'Goods1()',
insertText: 'Goods1()'
},{
label: 'Goods2()',
insertText: 'Goods2()'
}
]
}
}
