monaco-editor使用指南
官网
https://github.com/microsoft/monaco-editor
https://microsoft.github.io/monaco-editor/
下载引用
没有找到直接的下载地址，通过npm安装，然后从node_modules中找
1) 新建一个空文件夹，然后cmd命令运行NPM安装monaco-editor：
npm install monaco-editor
执行完成后文件夹中会多一些内容，如下
打开node_modules，会看到一个monaco-editor文件夹，这个就是我们要的文件
2) 复制 monaco-editor 文件夹到项目中
如图所示：
html javascript中使用
1) Html中引用 loader.js
<script src="~/lib/monaco-editor/min/vs/loader.js"></script>2) 创建容器div
<div id="test-container" style="height:500px;"></div>
3) 初始化
参考资料：https://stackoverflow.com/a/57059229/17820203
$(document).ready(function () {
require.config({ paths: { 'vs': window.location.origin+'/lib/monaco-editor/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: '${window.location.origin}/lib/monaco-editor/min/'
};
importScripts('${window.location.origin}/lib/monaco-editor/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));
require(["vs/editor/editor.main"], function () {
let editor = monaco.editor.create(document.getElementById('test-container'), {
//value: [
// '.demo {',
// 'color:red;',
// '}'
//].join('\n'),
value:$("#CustomerStyle").val(),
language: 'css',
theme: 'vs-dark'
});
});
})效果图
配置
设置主题
monaco-editor共支持三种主题：vs-dark vs hc-black
初始化主题设置
require(["vs/editor/editor.main"], function () {
let editor = monaco.editor.create(document.getElementById('test-container'), {
value:$("#CustomerStyle").val(),
language: 'css',
theme: 'vs-dark' // 主题 vs-dark,vs,hc-black
});
});变更主题
function changeTheme(theme) {
var newTheme = theme === 1 ? 'vs-dark' : theme === 0 ? 'vs' : 'hc-black';
monaco.editor.setTheme(newTheme);
}三种主题预览
vs 主题 Visual Studio
vs-dark 主题 ( Visual Studio Dark )
hc-black 主题 High Contrast Dark 高对比度
隐藏minimap，小地图，代码总览
minimap是编辑器右边得代码缩图，默认是显示的，隐藏的配置如下：
monaco-editor 隐藏代码总览 设置
minimap: {enabled: false},// 隐藏代码缩图 完整代码
require(["vs/editor/editor.main"], function () {
let editor = monaco.editor.create(document.getElementById('test-container'), {
value:$("#CustomerStyle").val(),
language: 'css',
minimap: {enabled: false},// 隐藏代码缩图
theme: 'vs' // 主题 vs-dark,vs,hc-black
});
});设置前后效果对比：
获取和设置内容
monaco-editor 获取编辑器内容 的方法 editor.getModel().getValue()
monaco-editor 设置编辑器内容 的方法 editor.getModel().setValue()
editor为编辑器初始化monaco.editor.create时返回的编辑器对象
var source = editor.getModel().getValue();
editor.getModel().setValue(source)
let editor;
require(["vs/editor/editor.main"], function () {
editor = monaco.editor.create(document.getElementById('test-container'), {
value:$("#CustomerStyle").val(),
language: 'css',
minimap: {enabled: false},// 隐藏代码缩图
theme: 'vs' // 主题 vs-dark,vs,hc-black
});
});
$("#format_sitecss").click(function () {
// 获取内容
var source = editor.getModel().getValue();
// 新的内容
var output = "new string"
// 设置内容
editor.getModel().setValue(output)
return false;
})格式化代码
monaco-editor 默认不支持格式化css代码，因此在如果设置了css语言，文档中右键是没有 format document 菜单的
执行格式化代码，也不会有效果
editor.getAction(['editor.action.formatDocument'])._run();因此需要借助其他方式 Beautify.js 来格式化代码，获取value，然后格式化value，再重新设置
自动尺寸：automaticLayout
https://github.com/Microsoft/monaco-editor/issues/28#issuecomment-228523529
启用编辑器将初始化一个interval用于检查其容器 dom 节点大小是否已更改。
启用此功能可能会对性能产生严重影响。
默认为false。
虽然方便，但我个人不会使用此选项，因为它是通过安装每 100 毫秒测量一次容器大小的间隔来实现的。 原因是编辑器无法知道您的应用程序中的具体内容可能会导致其容器调整大小。 在您的情况下（当容器大小仅由窗口大小修改时），我将添加一个 window.onresize 侦听器并在该侦听器内调用 editor.layout() 。 这将导致编辑器重新扫描其容器大小。 更好的是，如果你能以某种方式计算容器的大小，你可以将大小传递给 editor.layout() 方法。
