CodeMirror学习和使用

<template>
  <div class="in-coder-panel">
    <textarea ref="textarea" placeholder="请输入查询SQL"></textarea>
  </div>
</template>

<script type="text/ecmascript-6">
// 引入全局实例
import _CodeMirror from 'codemirror'

// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/base16-light.css'
import "codemirror/addon/hint/show-hint.css";

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
import 'codemirror/mode/sql/sql.js'
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");


// 尝试获取全局实例
const CodeMirror = window.CodeMirror || _CodeMirror

export default {
  name: 'in-coder',
  props: {
    // 外部传入的内容，用于实现双向绑定
    value: {
      type: String,
      require: true,
    },
  },
  data () {
    return {
      // 内部真实的内容
      code: '',
      // 默认的语法类型
      // 编辑器实例
      coder: null,
      // 默认配置
      options: {
        // 缩进格式
        tabSize: 2,
        // 主题，对应主题库 JS 需要提前引入
        // base16-light  cobalt
        theme: 'base16-light', //   
        // 显示行号
        lineNumbers: true,
        line: true,
        mode: 'sql',
        hintOptions: {
          completeSingle: false
        }
      },
    }
  },
  mounted () {
    // 初始化
    this.initialize()
  },
  methods: {
    // 初始化
    initialize () {
      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)
      // 编辑器赋值
      this.coder.setValue(this.value || this.code)

      // 支持双向绑定
      this.coder.on('change', (coder) => {
        this.code = coder.getValue()
        if (this.$emit) {
          this.$emit('input', this.code)
        }
      })
      this.coder.on("inputRead", () => {
        this.coder.showHint();
      });
    },
  }
}
</script>

<style lang="less" >
.in-coder-panel {
  flex-grow: 1;
  display: flex;
  position: relative;

  .CodeMirror {
    flex-grow: 1;
    z-index: 1;

    .CodeMirror-code {
      line-height: 19px;
    }
  }

  .code-mode-select {
    position: absolute;
    z-index: 2;
    right: 10px;
    top: 10px;
    max-width: 130px;
  }
}
</style>　

 官网：https://codemirror.net/index.html

 主题效果展示：https://my.oschina.net/u/4353184/blog/4296869

 参考博客： https://blog.csdn.net/liujiawei00/article/details/104006146