monaco-editor 简单使用

一. 文件调用示例

1. 安装package包 官方文档

"monaco-editor": "^0.28.1",
"monaco-editor-webpack-plugin": "^4.2.0",

Copy

请注意安装包的版本号

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-dark
            minimap: { // 关闭小地图
              enabled: false,
            },
            lineNumbers: 'off', // 隐藏控制行号
        });
      }
    }
  }
}
 
.coder-editor{
  width: 100%;
  height: 160px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

Copy

二. 属性说明

{
    value: '', // 编辑器初始显示文字
    language: 'javascript', // 语言javascript | json
    automaticLayout: true, // 自动布局
    theme: 'vs', // 官方自带三种主题vs, hc-black, or vs-dark
    foldingStrategy: 'indentation', // 代码可分小段折叠
    overviewRulerBorder: false, // 不要滚动条的边框
    lineNumbers: 'off', // 控制行号的出现on | off
    scrollbar: { // 滚动条设置
      verticalScrollbarSize: 4, // 竖滚动条
      horizontalScrollbarSize: 6, // 横滚动条
    },
    readOnly: false, // 是否只读 Defaults to false | true
    minimap: { // 关闭小地图
      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'));