Monaco Editor 的基本用法

比眉伴天荒 2023-09-28 09:33 148阅读 0赞

您可能希望在您的网站上设置一个编辑器，允许用户自由输入并查看代码的行为方式。在这种情况下，我认为最基本的方法是使用 contenteditable 属性，但以这种方式实现它可能是一项艰巨的任务。.. ..

使用 Ace Editor 和 Monaco Editor 会容易得多，这些编辑器可以嵌入到您的网站中。

这一次，我将解释 Monaco Editor 的基本用法，它是基于 VS 代码源创建的，用于在 Web 浏览器上工作。

图片来自微软[官方摩纳哥编辑器页面][Link 1]

### **前提** ###

chrome（版本：101.0.4951.67）  
摩纳哥编辑器版本 0.33.0。

### **什么是摩纳哥编辑器？** ###

#### **微软开源** ####

Monaco Editor 是微软开发的开源代码编辑器（[微软官方 Monaco Editor 页面][Monaco Editor]）。它是为在基于 VS 代码源的 Web 浏览器上工作而创建的。

在 MIT 许可下创建，它支持 Edge、Chrome、Firefox、Safari 和 Opera。但是，请注意不支持移动浏览器和移动 Web 框架。

#### **Monaco Editor 的两个主要功能** ####

**功能一、普通编辑器功能**

图片来自[微软官方摩纳哥编辑器页面][Monaco Editor]

与 VS 代码一样，它充当浏览器上的代码编辑器。

**機能2. Diff Editor**

图片来自[微软官方摩纳哥编辑器页面][Monaco Editor]

它是一个可以显示与代码匹配的更改的功能。

有关更多详细信息，请参阅Github 上[的 Monaco Editor FAQ 页面][Monaco Editor]。

### **您要使用嵌入式编辑器（例如 Monaco Editor）的屏幕** ###

例如，当您使用[Bootstrap Editor][]时，您会发现嵌入式编辑器的价值，该服务可让您轻松使用 Bootstrap 模板创建您选择的站点。

它对于诸如 Bootstrap Editor 之类的服务很有用，它允许您实时查看在您重写代码时 HTML 显示将如何变化。Bootstrap Editor 使用 Ace Editor，它具有与 Monaco Editor 类似的功能。

图片来自[Bootstrap 编辑器][Bootstrap]

### **如何使用摩纳哥编辑器** ###

Monaco Editor 主要用于以下过程。

*  使用 npm 下载
 *  加载下载的 load.js
 *  编写给定的代码

#### **使用 npm 下载** ####

您可以在终端或命令提示符下执行以下命令所执行的目录下下载使用 Monaco Editor 所需的文件。

命令下载 v0.33.0

npm install monaco-editor@0.33.0

npm install monaco-editor

#### **加载下载的 load.js** ####

根据您将其下载到的目录，您可以通过在 HTML 文件中写入以下内容来加载 load.js。

根据您下载 Monaco Editor 相关文件的位置，适当地重写路径。

#### **编写给定的代码** ####

HTML.html 上的说明

<!DOCTYPE html> <html> <head> <title>browser-amd-editor</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <h2>Monaco Editor Sample</h2> <div id="container" style="width: 800px; height: 600px; border: 1px solid grey;" ></div> <script src="./node_modules/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } }); require(["vs/editor/editor.main"], function () { var editor = monaco.editor.create( document.getElementById("container"), { value: [ "function x() { ", '\tconsole.log("Hello world!");', "}", ].join("\n"), language: "javascript", } ); }); </script> </body> </html>

这样，您可以在文本编辑器中查看数组中的代码，即 value : 的值。

图片. 在浏览器中显示上述 HTML 文件的结果

### **如何学习使用 Monaco Editor 的各种其他方法** ###

Monaco Editor 有一个[Play Ground][Link 1]页面，例如描述如何监听按下特定键的事件。

[Monaco Editor Playground][Link 1]

此外，另一篇文章描述了如何侦听浏览器中嵌入的 Monaco 编辑器代码发生更改的事件。

[如何在 Monaco Editor-Qiita 中监听嵌入式编辑器代码更改事件][Monaco Editor-Qiita]

[https://qiita.com][Monaco Editor-Qiita]

[Link 1]: https://microsoft.github.io/monaco-editor/playground.html
[Monaco Editor]: https://microsoft.github.io/monaco-editor/index.html
[Bootstrap Editor]: https://www.venezia-works.com/bst/index.html
[Bootstrap]: https://www.venezia-works.com/bs4/index.php
[Monaco Editor-Qiita]: https://qiita.com/kyok01_japan/items/fe68dba8d15399dd87c7