1. 简介

monaco-editor 编辑器是VS代码的代码编辑器。这里有一个描述代码编辑器功能的好页面。 它是根据麻省理工学院许可证授权的， 支持Edge、Chrome、Firefox、Safari和Opera。 移动浏览器或移动web框架不支持 monaco-editor 编辑器。更多信息，请访问摩纳哥编辑库。

2. 获取 cdnjs

cdnjs是一项免费的开源CDN服务，受到超过12.5%的网站的信任，每月提供超过2000亿次请求，由Cloudflare提供支持。 我们使在您的网站上加载库文件变得更快、更容易。

官网地址： cdnjs - The #1 free and open source CDN built to make life easier for developers

进入后,会看见一个搜索框,点击后输入你想要的库（如： monaco-editor）

点击搜索结果跳转后，将会出现一系列的链接。选择其中一个版本复制即可。

3. 开始使用

3.1 引入 js 文件和 css 文件

<link rel="stylesheet" data-name="vs/editor/editor.main" 
                href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>

3.2 搭建基本结构 - html

<div id="box"></div>

3.3 使用 monaco - js

require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs' } });
require(["vs/editor/editor.main"], () => {
    monaco.editor.create(document.getElementById('box'), {
        value: `function hello() {
                console.log("Hello world!");
            }`,
        language: 'javascript',
        theme: 'vs-dark',
    });
});

3.4 恭喜！完成编辑器

经过前面的引入、搭建、编写的过程。 我们可以看见成果了。

预览效果：