Monaco Editor API 使用范例

最新推荐文章于 2024-08-10 07:46:00 发布

SoildEnd

最新推荐文章于 2024-08-10 07:46:00 发布

阅读量3.9k

点赞数 1

分类专栏： JavaScript 文章标签： Monaco Editor API 教程入门编辑器

本文链接：https://blog.csdn.net/sinat_39448512/article/details/102652774

版权

本文详述了Monaco Editor的下载、搭建方法，并提供了常用API的调用示例，包括获取编辑器内容、实时获取光标位置、语法高亮等。同时，列举了学习资源，帮助开发者快速上手。

摘要由CSDN通过智能技术生成

Monaco Editor 是微软开发的一款开源在线代码编辑器。它是 VSCode 的浏览器版本，随着近年 VSCode 大热，Monaco Editor 也逐渐走红。目前虽未登上 Online Editor 领域的宝座，却也隐燃有超越几位老前辈之势。

GitHub项目链接：monaco-editor-demos

通过阅读本文，你可以了解以下内容：

如何下载 Monaco Editor
如何标准化搭建 Monaco Editor
如何寻找相关学习资源
如何调用常用 API

下载

新建项目文件夹，然后打开它：

$ mkdir my-application
$ cd my-application

接着下载 Monaco Editor：

$ npm install monaco-editor

搭建

本文提供了一个标准化的搭建方法，通过本文的方法搭建的 Monaco Editor 具有较强的功能扩展性。比如，如果你希望为应用添加多个编辑器，甚至文件管理系统，那么在本文提供的搭建方法之上，就可以直接添加这些新特性，从而避免不必要的踩坑。

本文提供两种搭建方法。

方法一：直接从GitHub仓库下载。

方法二：手动搭建。

下面说明了手动搭建的过程。

首先，在项目文件夹 my-application 下，新建一个名为 base 的文件夹。然后在该文件夹下新建 index.html, app.js, style.css 这三个文件:

$ mkdir base
$ cd base
$ touch index.html app.js style.css

在本地编辑器打开 index.html，输入：

<!DOCTYPE html>
<html>

<head>
    <title>Monaco Editor Demo</title>
    <link rel="stylesheet" href="./style.css">
    <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
    <script src="./app.js"></script>
</head>

<body>
    <div id="header