HUA

本文介绍了 Monaco Editor 这款微软开源的基于浏览器的代码编辑器，它功能强大，包括语法高亮、代码补全等，具有轻量、可定制、跨平台等特点。文中阐述了其应用场景、使用方法、基本概念等，还列举了类似项目并给出项目地址，适合多种开发需求。

关联问题: Monaco支持哪些语言 如何定制Monaco 怎样优化界面效果

Monaco Editor是微软开源的一款基于浏览器的代码编辑器，它源自于Visual Studio Code（简称VS Code）的编辑器部分。这款编辑器的功能非常强大，支持语法高亮、代码补全、括号匹配、代码缩进、代码片段、代码对比差异、Git 控制等功能。下面我们一起来看看它的特点和应用场景。

特点

  • 功能丰富：Monaco Editor拥有VS Code同款的强大功能，让你在浏览器中也能体验到专业的代码编辑体验。
  • 轻量级：整个编辑器基于浏览器，无需安装任何插件，即可在网页中直接使用。
  • 可定制：支持多种编程语言，可根据需求进行定制和扩展。
  • 跨平台：可以在任何支持现代浏览器的设备上使用。

应用场景

  • 在线编程教育：为学生提供一个在线编写代码的环境，方便教学和练习。
  • 代码演示和分享：将代码分享给他人，对方可以在浏览器中直接查看和编辑代码。
  • WebIDE开发：基于Monaco Editor开发WebIDE，为开发者提供一个便捷的在线开发环境。

如何使用

通过以下命令，你可以轻松地将Monaco Editor集成到你的项目中：

 1npm install monaco-editor

安装后，你将获得以下内容：

  • /esm：编辑器的ESM版本（与例如webpack等兼容）
  • /dev：AMD打包，未压缩
  • /min：AMD打包，并压缩
  • /min-maps：min版本的源映射
  • monaco.d.ts：指定编辑器的API（这是实际版本化的部分，其他内容被认为是私有的，可能会在任何版本中被破坏）

建议在开发时使用dev版本，在生产环境中使用min版本。

安装完成后，你可以根据需求选择不同的版本（ESM、AMD）进行使用。下面是一个简单的使用示例：

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <meta charset="UTF-8">
 5    <title>Monaco Editor</title>
 6    <style>
 7        #container {
 8            width: 800px;
 9            height: 600px;
10            border: 1px solid black;
11        }
12    </style>
13</head>
14<body>
15    <div id="container"></div>
16    <script src="node_modules/monaco-editor/min/vs/loader.min.js"></script>
17    <script>
18        require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }});
19
20        window.onload = function() {
21            require(['vs/editor/editor.main'], function() {
22                monaco.editor.create(document.getElementById('container'), {
23                    value: "// Write your code here",
24                    language: "javascript"
25                });
26            });
27        }
28    </script>
29</body>
30</html>

在这个例子中，我们创建了一个简单的HTML页面，引入了Monaco Editor的AMD版本。通过调用monaco.editor.create方法，我们在页面中创建了一个代码编辑器。

基本概念

在使用Monaco Editor时，有几个基本概念需要了解：

模型（Models）

模型是Monaco Editor的核心。当你管理内容时，与之交互的就是模型。模型代表一个已打开的文件。这可以是文件系统中实际存在的文件，也可以不是。例如，模型保存文本内容，确定内容的语言，并跟踪内容的编辑历史。

URIs

每个模型都由一个URI标识。这就是为什么两个模型不能有相同的URI。理想情况下，当你在Monaco Editor中表示内容时，你应该考虑一个虚拟文件系统，它与你的用户正在编辑的文件相匹配。例如，你可以使用file:///作为基础路径。如果一个模型在没有URI的情况下被创建，它的URI将是inmemory://model/1。随着更多模型的创建，这个数字会增加。

编辑器（Editors）

编辑器是模型的用户界面视图。这是附加到DOM上，你的用户视觉上看到的内容。典型的编辑器操作包括显示模型、管理视图状态或执行动作或命令。

提供者（Providers）

提供者提供智能编辑功能。例如，这包括补全和悬停信息。它与语言服务器协议不完全相同，但通常与之对应。

提供者在模型上工作。一些智能功能依赖于文件URI。例如，TypeScript解析导入，或JSON IntelliSense确定哪个JSON模式应用于哪个模型。因此，选择合适的模型URI非常重要。

可处置对象（Disposables）

许多与Monaco相关的对象通常实现了.dispose()方法。这个方法旨在在资源不再需要时执行清理。例如，调用model.dispose()将取消注册它，释放URI以供新模型使用。编辑器应该被处置以释放资源并移除它们的模型侦听器。

界面效果

结语

Monaco Editor无疑是一款非常强大的浏览器代码编辑器。通过本文的介绍，相信你已经对它有了初步的了解。如果你正在寻找一款在线代码编辑器，不妨试试Monaco Editor吧！

最后，让我们来看看一些与Monaco Editor类似的项目的功能和特点：

  • Ace Editor：一款流行的浏览器代码编辑器，支持多种编程语言，具有代码补全、语法高亮等功能。
  • CodeMirror：一款功能丰富的浏览器代码编辑器，支持插件扩展，被许多知名项目所采用。
  • Brackets：一款专为Web开发者设计的编辑器，支持实时预览、代码提示等功能。
  1. Codiva：一个轻量级的代码编辑器，专注于性能和易用性。
  • TinyMCE：一个富文本编辑器，广泛用于 Web 应用中。 这些项目各有特点，你可以根据自己的需求选择合适的项目进行使用。

总结

Monaco Editor以其强大的功能和VS Code的背书，成为了Web开发中不可或缺的代码编辑器。无论是个人项目还是企业级应用，Monaco Editor都能提供稳定而高效的代码编辑体验。希望这篇文章能帮助你更好地了解和使用Monaco Editor，让你的开发工作更加得心应手。

项目地址

 1https://github.com/microsoft/monaco-editor
个人笔记记录 2021 ~ 2025