微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。
monaco 支持的语言
支持智能感知、校验语法的语言
TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML
支持基础语法着色的语言
XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C
安装
npm install monaco-editor
在 node_modules/monaco-editor 目录中：
- 目录 esm: ESM 版本 (兼容于 webpack )
- 目录 dev: AMD 版本, 代码没被最小化
- 目录 min: AMD 版本, 代码被最小化
- 目录 min-maps: 代码最小化的 source maps
- 文件 monaco.d.ts: 这是api 接口的详细定义 。
推荐开发使用 dev 目录, 生产环境中使用 min 目录。
集成
AMD 版本的集成
直接上一个最基本的HTML页面集成 monaco editor，更多的例子可以参考官方例子 monaco-editor-samples。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': '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>
ESM 版本使用 webpack 插件的集成
使用 "Monaco Editor Loader Plugin" 插件的方式集成
这个是最简单集成的方式，通过配置这个插件就可以选择editor 的语言和其他特性。了解更多可以访问插件官方链接 Monaco Editor Loader Plugin。
index.js
import * as monaco from 'monaco-editor';
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
module.exports = {
plugins: [
new MonacoWebpackPlugin({
languages:["javascript","json"],
features:["coreCommands","find"]
})
]
};
原始webpack方式集成（不使用插件）
完成的例子可以参考官方链接 https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack 或者 https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-small。
index.js
import * as monaco from 'monaco-editor';
// Since packaging is done by you, you need
// to instruct the editor how you named the
// bundles that contain the web workers.
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
if (label === 'json') {
return './json.worker.bundle.js';
}
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === 'typescript' || label === 'javascript') {
return './ts.worker.bundle.js';
}
return './editor.worker.bundle.js';
}
}
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
webpack.config.js
const path = require('path');
module.exports = {
entry: {
"app": './index.js',
// Package each language's worker and give these filenames in `getWorkerUrl`
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
},
output: {
globalObject: 'self',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.ttf$/,
use: ['file-loader']
}]
}
};
集成 monaco 用于实现 json代码格式化的例子
百度搜索关键字“json 格式化”一堆网站，提供的功能原始粗糙，一句话都是为了流量广告。作为码农难易忍受，又加之这次特殊疫情出不了们，自己挽起袖子干起来。
本来准备集成 codeMirror，但是codeMirror 实在是太丑了，凑巧在 leecode 刷题时候，发现他们代码编辑器又好看体验又好，仔细一研究发现用 monaco editor 集成的。看样子monaco 还是很受码农欢迎的，再加上vscode 也是基于monaco ，monaco 形象在我的心中顿时伟大起来。闲话少说狠戳链接 YOUJSON 观看例子。
初始界面截图如下
编辑器启动后自动 focus ，光标定在第一行，这个时候可快读通过ctrl+v 粘贴需要格式化的JSON 字符。
粘贴 json 字符到编辑器
粘贴 json 字符时，编辑器会自动格式化到漂亮模式如下图。
如果想手动格式化json，请单击“格式化 Shift+ Alt +F” 按钮。实现代码如下：
monacoInstance.getAction('editor.action.formatDocument').run();
monacoInstance 是编辑器实例
自动化校验
json 编辑器怎么可以没有自动校验功能（monaco 自动加持），让我们删除一个逗号试试。
红色的波浪线+hover 提示+ 右侧颜色导航 ，是否有种熟悉的味道?
折叠大json
遇到变态的又长又粗的json 怎么办，youjson 折叠可以降服他们。
点击“折叠”按钮折叠json，慢慢展开着看是否很爽？实现代码如下：
function toggleFold() {
if (monacoInstance.folded) {
monacoInstance.getAction('editor.unfoldAll').run();
monacoInstance.focus();
} else {
monacoInstance.getAction('editor.foldAll').run().then(function () {
monacoInstance.setSelection(new monaco.Range(1, 1, 1, 1));
monacoInstance.focus();
monacoInstance.getAction('editor.unfold').run();
});
}
monacoInstance.setScrollTop(0);
monacoInstance.folded = !monacoInstance.folded;
}
感谢
感谢您翻到这儿，你是个很有耐心、爱学习的人。
