vue集成codemirror代码编辑器

npm i codemirror --save

JsonEditor.vue

<template>
  <div class="json-editor">
    <textarea ref="textarea"></textarea>
  </div>
</template>

<script>
import CodeMirror from 'codemirror'
// 核心样式
  import 'codemirror/lib/codemirror.css'
  // 引入主题后还需要在 options 中指定主题才会生效
  import 'codemirror/theme/rubyblue.css'
  import 'codemirror/theme/xq-light.css'

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
  // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
  // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
  // 如果有Java c++语言设置需求，需要 引入clike.js
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/xml/xml.js'
  import 'codemirror/mode/clike/clike.js'
  import 'codemirror/mode/markdown/markdown.js'
  import 'codemirror/mode/python/python.js'
  import 'codemirror/mode/r/r.js'
  import 'codemirror/mode/shell/shell.js'
  import 'codemirror/mode/sql/sql.js'
  import 'codemirror/mode/swift/swift.js'

  import  'codemirror/addon/hint/anyword-hint'

// 设置光标所在行高亮工具包
import 'codemirror/addon/selection/active-line'
// 快捷键
import 'codemirror/keymap/sublinme.js'

  export default {
    name: 'in-coder',
    props: {
      value: {type: String,default: ''},
      config: {
          type:Object,default: () {return {}}
      }
    },
    data () {
      return {
        jsonEditor: false,
        // 支持切换的语法高亮类型，对应 JS 已经提前引入
        // 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
        modeObx: {
              Text: 'text/plain',
              Java: 'text/x-java',
              Nodejs: 'javascript',
              CPlus: 'text/x-c++src'
        }
      }
    },
    mounted () {
      this.jsonEditor = this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
            mode: config.mode || "text/javascript",
           lineNumbers: true, // 行号
            lint: true,
             styleActiveLine: true, // 高亮光标所在行
            indentUnit: 2, // 缩进
            smartIndent: true, // 开启自动缩进
            tabSize: 2,
            theme: config.theme || "default",
            readOnly: config.readOnly || true,
       },
    },
    watch: {
        value(value){
              let editorValue = this.jsonEditor.getValue()
              if (value !== editValue) {this.jsonEditor.setValue(value)}
        }
    },
    methods: {
      getValue () {
            return this.jsonEditor.getValue()
      },
      // 更改模式
      changeMode (val) {
        // 修改编辑器的语法配置
        this.coder.setOption('mode', this.modeObx[val])
      }
    }
  }
</script>

<style scoped>
  .json-editor {
    position: relative
  }
  .json-editor >>> .CodeMirror {
    height: 100%; min-height: 200px;
  }
  .json-editor >>> .CodeMirror-scroll {
      min-height: 200px;
  }
</style>

</script>

样式覆盖，可以加一个class="my-json-editor",然后在当前vue的style中覆盖组件样式。
比如：

.my-json-editor .CodeMirror {min-height: 300px}
my-json-editor .CodeMirror-scroll {
      min-height: 300px;
}

JSON.stringify(jsonCode)传入的代码失去了格式，变成了一行代码，解决办法是使用stringify的第三个参数JSON.stringify(jsonCode, null, 2)。