# monaco-editor-com

npm install vue-monaco
//项目是 vue-cli v4.x.x， webpack 4. 使用[email protected]
//项目是 vue-cli v5.x.x， webpack 5. 使用[email protected]

使用 monaco-editor-webpack-plugin:

// vue.config.js
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonacoEditorPlugin()
  ]
}

使用示例

import monacoEditorCom from 'monaco-editor-com'
Vue.use(monacoEditorCom)
// 使用全局组件
<monacoEditorCom></monacoEditorCom>

### Props

- `opts`: 配置对象
  readOnly: false, // 是否可编辑
  language: 'javascript', // 语言类型
  theme: 'vs', // 编辑器主题：vs, hc-black, or vs-dark
  可补充其他配置项（见官网）.
- `height`: `Number` 高度 默认 300
- `diffEditor`: `true` 比对编辑器, `false` 默认
- `value`: `string`编辑器对应的值
- `original`: `string` 比对编辑器有效， 原始值

示例

```vue
<template>
  <monacoEditorCom @change="changeValue" ref="monacoEditorCom" />
</template>

<script>
export default {
  methods: {
    changeValue(value) {},
    getValue() {
      // 获取值
      this.$refs.monacoEditorCom.getVal()
    },
  },

  data() {
    return {
      code: '...',
    }
  },
}
</script>