一. 文件调用示例
1. 安装package包 官方文档
"monaco-editor": "^0.28.1",
"monaco-editor-webpack-plugin": "^4.2.0",Copy
请注意安装包的版本号
monaco-editor-webpack-plugin | monaco-editor |
|---|---|
7.*.* | >= 0.31.0 |
6.*.* | 0.30.* |
5.*.* | 0.29.* |
4.*.* | 0.25.*, 0.26.*, 0.27.*, 0.28.* |
3.*.* | 0.22.*, 0.23.*, 0.24.* |
2.*.* | 0.21.* |
1.9.* | 0.20.* |
1.8.* | 0.19.* |
1.7.* | 0.18.* |
2.配置vue.coinfig.js
在vue.coinfig.js中增加如下配置：
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');module.exports = {lintOnSave: false, configureWebpack: {plugins: [// 配置JS在线代码编辑器monaco-editor的辅助文件new MonacoWebpackPlugin(),],},
};Copy
3. 调用示例
import * as monaco from 'monaco-editor';
export default {data() {return {monacoEditor: null, // 语言编辑器}},mounted(){this.init()},methods: {init(){if(this.$refs.codeContainer){// 初始化编辑器，确保dom已经渲染this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {value: '', // 编辑器初始显示文字language: 'json', // 语言automaticLayout: true, // 自动布局theme: 'vs', // 官方自带三种主题vs, hc-black, or vs-darkminimap: { // 关闭小地图enabled: false,},lineNumbers: 'off', // 隐藏控制行号});}}}
}.coder-editor{width: 100%;height: 160px;border: 1px solid rgba(0, 0, 0, 0.08);
}
Copy
二. 属性说明
{value: '', // 编辑器初始显示文字language: 'javascript', // 语言javascript | jsonautomaticLayout: true, // 自动布局theme: 'vs', // 官方自带三种主题vs, hc-black, or vs-darkfoldingStrategy: 'indentation', // 代码可分小段折叠overviewRulerBorder: false, // 不要滚动条的边框lineNumbers: 'off', // 控制行号的出现on | offscrollbar: { // 滚动条设置verticalScrollbarSize: 4, // 竖滚动条horizontalScrollbarSize: 6, // 横滚动条},readOnly: false, // 是否只读 Defaults to false | trueminimap: { // 关闭小地图enabled: false,},cursorStyle: 'line', // 光标样式automaticLayout: false, // 自动布局fontSize: 14, // 字体大小tabSize: 2, // tab缩进长度autoIndent: true, // 自动布局
}Copy
支持的语言类型
在项目的node_modules/monaco-editor/min/vs/basic-languages目录下能看到支持的语言类型：
三. 常用事件
销毁编辑器
this.monacoEditor.dispose();Copy
实时获取编辑器的值
this.monacoEditor.onDidChangeModelContent(() => {this.monacoEditor.getValue() // 获取编辑器中的语句
})Copy
设置编辑器的值
this.monacoEditor.setValue(newValue)Copy
其它事件
editor.setValue('console.log("Hello world!");'); //设置值
editor.getValue(); //获取值editor.getSelection(); //获取选中的行信息editor.getModel().getLineContent(1); //获取某一行的内容
editor.getModel().getLinesContent(); //获取每一行的内容monaco.editor.setTheme('vs-dark'); //设置主题editor._configuration._rawOptions.language //获取编辑器当前语言（初始化值）
editor.getModel().getLanguageId() //动态（已改变编辑器语言）//改变属性
editor.updateOptions({//关闭行号lineNumbers: "off"
});//内容改变事件
editor.onDidChangeModelContent(function(e){console.log(e);console.log(editor.getValue());
});//添加按键监听
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {console.log('Ctrl + S 保存')
})editor.trigger('a', 'editor.action.formatDocument') //触发：格式化文档，更多支持项：editor._actions//渲染代码得到HTML
monaco.editor.colorize('console.log("Hello world!");', 'javascript').then(function (data) {console.log(data);
});//渲染节点代码
console.log("Hello world!");
monaco.editor.colorizeElement(document.getElementById('code'));
