一、CodeMirror插件使用

1.CodeMirror插件安装

下载插件：npm install codemirror @5.59.1
这里使用的是codemirror5，现在codemirror最新已经是6了，不过参考文档相对较少，使用起来不是那么方便。后续文档丰富之后可以考虑使用6

二、CodeMirror基本配置

这里使用到的配置如下

    const options = {
      mode: 'yaml',
      // 缩进格式
      tabSize: 2,
      // 主题，对应主题库 JS 需要提前引入
      theme: 'base16-dark',
      // 行号码
      lineNumbers: true,
      line: true,
      readOnly: false,
      // 是否开启语法校验
      lint: true,
      // 使用的语法校验工具
      gutters: ['CodeMirror-lint-markers'],
      // 光标背景行高亮
      styleActiveLine: true,
      // 自动刷新
      autoRefresh: true,
      height: '500px'
    }

三、CodeMirror具体使用

1.首先创建一个textarea标签

<textarea ref="textarea" v-model="code"></textarea>

2.然后引入相关依赖

// 基础依赖
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
// 语法模式 这里我使用的是yaml，各位按需引入（json、html等等）
import 'codemirror/mode/${props.mode}/yaml.js'
// 主题样式
import 'codemirror/theme/base16-dark.css'
// 自动刷新依赖
import 'codemirror/addon/display/autorefresh'
// 行高亮依赖
import 'codemirror/addon/selection/active-line'

3.最后初始化编辑器

	// textarea为textarea标签的ref，vue3写法
	const textarea = ref(null)
	// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
 	coder = CodeMirror.fromTextArea(textarea.value, options)
   	coder.on('blur', coder => {
   		// 获取文本内容
        const newValue = coder.getValue()
        // 抛出事件
        emit('update:modelValue', newValue)
      })

四、CodeMirror语法校验

1.引入语法校验依赖

// 语法校验基础依赖
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
// yaml校验js，按需引入（json-lint、html-lint等）
import 'codemirror/addon/lint/yaml-lint.js'

codemirror支持的校验库如下

2.配置options中开启校验

// 是否开启语法校验
lint: true,
// 使用的语法校验工具
gutters: ['CodeMirror-lint-markers'],

3.安装lint需要的其他依赖

仅仅是这样还是不够的，因为codemirror对应的校验插件中可能还依赖其他的库
比如yaml：

可以看到他还依赖js-yaml，所以我们需要下载js-yaml插件 npm install js-yaml
在代码中引入： import jsYaml from 'js-yaml' 绑定到window上 window.jsyaml = jsYaml
其他语法也类似，例如json需要json-lint，然后绑定到window.jsonlint上：

五、完整代码

我将codemirror封装为一个vue3组件，各位可以参考一下

<template>
  <div class="in-coder-panel">
    <textarea ref="textarea" v-model="code"></textarea>
  </div>
</template>

<script>
import { onMounted, ref, watch } from 'vue'
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/addon/lint/yaml-lint.js'
import jsYaml from 'js-yaml'
window.jsyaml = jsYaml
export default {
  components: {},
  props: {
    modelValue: {
      type: String,
      default: ``
    },
    mode: {
      type: String,
      default: 'javascript'
    },
    lint: {
      // codemirror仅支持html、css、json、javascript、yaml这几种，请手动引入，且需要下载相关插件，具体插件参考源码(node_modules/codemirror/addon/lint/)或官方文档
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    // 主题
    theme: {
      type: String,
      default: 'base16-dark' // 编辑器主题色
    },
    // 高亮选中行
    styleActiveLine: {
      type: Boolean,
      default: true
    },
    // 自动刷新
    autoRefresh: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const textarea = ref(null)
    const code = ref(props.modelValue)
    // 编辑器实例
    let coder
    watch(
      () => props.modelValue,
      val => {
        coder?.setValue(val)
      }
    )
    const options = {
      mode: props.mode,
      // 缩进格式
      tabSize: 2,
      // 主题，对应主题库 JS 需要提前引入
      theme: props.theme,
      // 行号码
      lineNumbers: true,
      line: true,
      // extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
      readOnly: props.readonly,
      lint: props.lint,
      gutters: ['CodeMirror-lint-markers'],
      // 光标背景行高亮
      styleActiveLine: props.styleActiveLine,
      // 自动刷新
      autoRefresh: props.autoRefresh,
      height: '500px'
    }
    const initialize = async () => {
      try {
      // 动态引入相关依赖
        await import(`codemirror/theme/${props.theme}.css`)
        if (props.lint) {
          await import('codemirror/addon/lint/lint.js')
          await import('codemirror/addon/lint/lint.css')
        }
        if (props.mode) {
          await import(`codemirror/mode/${props.mode}/${props.mode}.js`)
        }
        if (props.autoRefresh) {
          await import('codemirror/addon/display/autorefresh')
        }
        if (props.styleActiveLine) {
          await import('codemirror/addon/selection/active-line')
        }
      } catch (e) {
        console.log(e)
      }
      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      coder = CodeMirror.fromTextArea(textarea.value, options)
      coder.on('blur', coder => {
        const newValue = coder.getValue()
        emit('update:modelValue', newValue)
      })
    }
    onMounted(() => {
      initialize()
    })
    const checkYaml = async val => {
      jsYaml.load(val)
    }
    return {
      code,
      options,
      textarea,
      checkYaml
    }
  }
}
</script>

<style lang="scss" scoped>
.in-coder-panel {
  width: 100%;
  height: 100%;
  :deep(.CodeMirror) {
    border: 1px solid #eee;
    height: 100%;
    width: 100%;
    .CodeMirror-code {
      line-height: 19px;
    }
  }
}
</style>
<style>
.CodeMirror-lint-tooltip {
  z-index: 10000 !important;
}
</style>

具体使用：

<template>
  <div>
    <base-codemirror
      ref="yamlRef"
      v-model="code"
      mode="yaml"
      style="height: 200px"
      :lint="true"
      :readonly="true"
    ></base-codemirror>
    <el-button @click="btnClick">点击</el-button>
  </div>
</template>

<script>
import BaseCodemirror from '@/components/Base/BaseCodemirror'
import { ref } from 'vue'
export default {
  name: 'Demo',
  components: {
    BaseCodemirror
  },
  setup() {
    const yamlRef = ref(null)
    const code = ref(`apiVersion: apps/v1
kind: DaemonSet
metadata:
  annotations:
    deprecated.daemonset.template.generation: "1"
    field.cattle.io/creatorId: user-jsgrs
  creationTimestamp: "2022-05-16T03:08:58Z"
  generation: 1
  labels:
    cattle.io/creator: norman
    workload.user.cattle.io/workloadselector: daemonSet-default-asdf`)
    const btnClick = () => {
      yamlRef.value.checkYaml(code).then(() => {
        console.log(11)
      })
    }
    return {
      code,
      yamlRef,
      btnClick
    }
  }
}
</script>

<style scoped></style>