vue-monaco 【monaco-editor】使用和汉化

vue-monaco：是基于monaco-editor二次封装的，实现了v-model双向数据绑定

版本

"vue": "^2.6.11",

"vue-monaco": "^1.2.2",

"monaco-editor-locales-plugin": "0.0.3",

@vue/cli 4.5.13

安装插件

npm i vue-monaco@1.2.2

npm install --save-dev monaco-editor-locales-plugin@0.0.3

MonacoEditor使用

<template>
  <MonacoEditor class="editor"  v-model="code" :options="options" language="javascript" />
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: 'const noop = () => {}',
      options:{},
    }
  }
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

MonacoEditor 菜单汉化

const MonacoLocalesPlugin = require('monaco-editor-locales-plugin');
module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [new MonacoLocalesPlugin({
      //设置支持的语言
      languages: ["es", "zh-cn"],
      //默认语言
      defaultLanguage: "zh-cn",
      //打印不匹配的文本
      logUnmatched: false,
      //自定义文本翻译
      mapLanguages: {
        "zh-cn": {
          "Peek": "查找引用",
          "Go to Symbol...": "跳到变量位置",
          "Command Palette": "命令面板",
          "Go to References":"参考",
        }
      }
    })],

  },
}

MonacoEditor基础配置

参考博客