monaco-editor 简单使用

最新推荐文章于 2025-11-10 07:03:52 发布

原创最新推荐文章于 2025-11-10 07:03:52 发布 · 2.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前段开发专栏收录该内容

2 篇文章

订阅专栏

博客介绍了Vue的文件调用示例，包括安装package包并注意版本号、配置vue.coinfig.js及调用示例。还说明了支持的语言类型，以及常用事件，如销毁编辑器、实时获取和设置编辑器的值等。

一. 文件调用示例

1. 安装package包官方文档

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

请注意安装包的版本号

`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(),
    ],
  },
};

3. 调用示例

<template>
  <div>
    <div ref="codeContainer" class="coder-editor"></div>
  </div>
</template>

<script>
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', // 隐藏控制行号
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.coder-editor{
  width: 100%;
  height: 160px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
</style>

二. 属性说明

{
    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, // 自动布局
}

支持的语言类型

在项目的node_modules/monaco-editor/min/vs/basic-languages目录下能看到支持的语言类型：

三. 常用事件

销毁编辑器

this.monacoEditor.dispose();

实时获取编辑器的值

this.monacoEditor.onDidChangeModelContent(() => {
  this.monacoEditor.getValue() // 获取编辑器中的语句
})

设置编辑器的值

this.monacoEditor.setValue(newValue)

其它事件

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);
});

//渲染节点代码
<pre id="code" data-lang="javascript" style="width:500px;">console.log("Hello world!");</pre>
monaco.editor.colorizeElement(document.getElementById('code'));