Asp.Net Core 使用Monaco Editor 实现代码编辑器功能

2022-04-16 13:53:44

在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑json格式的测试数据等。我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能。Monaco Editor是著名的VSCode的前身,项目地址:https://microsoft.github.io/monaco-editor/。本文介绍在Asp.Net Core项目中使用Monaco Editor实现代码编辑器功能。

安装

可以使用npm下载moaco-editor:

[//*/, 'comment', '@@push' ], ["\*/", 'comment', '@@pop' ], [/[/*]/, 'comment' ] ], whitespace: [ [/[ trn]+/, 'white'], [//*/, 'comment', '@@comment' ], [///.*$/, 'comment'], ], }, }; }</script>}}

效果如下:

Asp.NetCore使用MonacoEditor实现代码编辑器功能

本文的示例项目已经上传到github: https://github.com/zhenl/monacoEditorDotNet