vue-codemirror在线编辑器实现sql预览

前提条件

codemirror github： github.com/surmon-chin…

codemirror theme：codemirror.net/demo/theme.…

安装

npm install vue-codemirror --save

# or
yarn add vue-codemirror

代码实现

<template>
  <div class="kyetree-vue-codemirror">
    <codemirror class="vue-codemirror" v-model="showCode" :options="cmOptions"></codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// import 'codemirror/lib/codemirror.css'
// import 'codemirror/keymap/sublime.css' // sublime编辑器效果
// import 'codemirror/addon/selection/avtive-line' // 光标背景高亮，配置里面也需要styleActiveLine 设置为true

  // 核心样式
  import 'codemirror/lib/codemirror.css'
  // 引入主题后还需要在 options 中指定主题才会生效
  // import 'codemirror/theme/cobalt.css'
  // import 'codemirror/theme/dracula.css' // 配置里面也需要theme设置为monokai
  // import 'codemirror/theme/base16-dark.css'
  // import 'codemirror/theme/blackboard.css'
  // import 'codemirror/addon/fold/foldgutter.css'
  // import 'codemirror/addon/hint/show-hint.css'
  // import 'codemirror/addon/hint/css-hint.js'
  // 需要引入具体的语法高亮库才会有对应的语法高亮效果
  // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
  // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 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/swift/swift.js'
  // import 'codemirror/mode/vue/vue.js' // 配置里面要设置mode为vue
  import 'codemirror/mode/sql/sql.js' // sql高亮 配置mode为x-sql
export default {
  components: {
    codemirror
  },
  props: {
    codes: String
  },
  data() {
    return {
      showCode: this.codes,
      cmOptions: {
        tabSize: 4, // tab四个空格
        theme: 'default', // 主题样式
        lineNumbers: true, // 是否显示行数
        styleActiveLine: true, // line 选择是否高亮
        matchBrackets: true, // 括号匹配
        mode: 'text/x-sql', // 实现vue代码高亮
        readOnly: false, // 只读
      }
    }
  },
  watch: {
    codes(val) {
      this.showCode = val
    },
    showCode(val) {
      this.$emit('changeCode', val)
    }
  }
}
</script>

<style lang="scss">
.kyetree-vue-codemirror {
  .vue-codemirror {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .Codemirror {
    height: 500px;
  }
  .code-run {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    color: #7653d6;
    font-weight: bold;
    padding: 2px;
    top: 2px;
    margin-left: 6px;
    z-index: 11;
    border-radius: 50%;
    border: 1px solid #7653d6;
    left: -11px;
  }
}
</style>