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

最新推荐文章于 2025-02-26 14:56:09 发布

Java架构设计

最新推荐文章于 2025-02-26 14:56:09 发布

阅读量1.3k

点赞数 2

文章标签： asp.net 编辑器 javascript Java程序员程序人生

本文链接：https://blog.youkuaiyun.com/wdjnb/article/details/122321661

版权

本文介绍了在Asp.Net Core项目中使用Monaco Editor创建代码编辑器的详细步骤，包括安装、基本功能、设置、代码比较和自定义语言的实现。通过实例代码展示如何配置编辑器并实现自定义语言支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

安装

可以使用npm下载moaco-editor:

npm install monaco-editor@0.31.1

我们需要的文件在node_modules/monaco-editor/min/vs目录中，将整个vs目录拷贝到Asp.Net Core Web项目的wwwroot/lib目录下：

在Program.cs中需要启动静态文件:

app.UseStaticFiles();

在布局页面中引入如下css和js:

    <link data-name="vs/editor/editor.main" rel="stylesheet" href="~/lib/vs/editor/editor.main.css" />

    <script  src="~/lib/vs/loader.js"></script>
    <script  src="~/lib/vs/editor/editor.main.nls.js"></script>
    <script src="~/lib/vs/editor/editor.main.js"></script>

基本的环境设置就完成了。

基本功能

现在可以在页面中实现编辑器的基本功能，在页面中增加一个div，作为编辑器容器:

<div id="container" style="width:800px;height:600px;border:1p

最低0.47元/天解锁文章