安装

npm i vue-codemirror -S

基础使用

1. 引入
   在需要的vue单页中

import {codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'

export default {
    name: "basic-line-configs",
    components:{
      codemirror // 声明组件
    },
}

全局引入,在main.js中

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

2. 使用

<codemirror
      ref="chartOption"
      :value="mirrorCode"
      :options="cmOptions" 
      @change="mirrorCodeChange">
</codemirror>
 // :value 的值为字符串
 // :option 为codemirror配置

  import {codemirror } from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/base16-light.css'

  import 'codemirror/mode/javascript/javascript.js' //
  export default {
    name: "basic-line-configs",
    components:{
      codemirror
    },
    data() {
      return {
        mirrorCode:'',
        cmOptions: {
          tabSize: 2, // Tab键空格数
          mode: 'application/json', //模式
          theme: 'base16-light', // 主题
          lineNumbers: true, //是否显示行号
          line: true,
        },
      }
    },
  }

参数配置

readOnly: boolean|string 。true只读, “nocursor”，那么除了设置只读外，编辑区域还不能获得焦点。

theme: string。 引入相应主题的css，再在配置项中指定

import 'codemirror/theme/ayu-dark.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/monokai.css'

高度自适应

.CodeMirror {
	border: 1px solid #eee;
    height: auto;
}
.CodeMirror-scroll {
	height: auto;
	overflow-y: hidden;
	overflow-x: auto;
}