vue-codemirror 最全踩坑之路

1. npm i vue-codemirror --save-D

2. 在组件中使用

    公共的配置文件 setting.js

import 'codemirror/lib/codemirror.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js'
// hint
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/sublime.js'
// foldGutter
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
// 编辑的主题文件
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/base16-light.css'

     基础 vue 文件

<template><codemirror v-model="item" :options="cmOption" class="code-mirror" @ready="onCmReady3" @focus="onCmFocus" @input="onCmCodeChange" ref="myCmGenerate"></codemirror>
</template><script>
import { codemirror } from 'vue-codemirror'
// 我这里引入的是JS语言文件
import 'codemirror/mode/javascript/javascript.js'
import './setting.js'
export default {data () {return {item: '',cmOption: {tabSize: 2, // tabstyleActiveLine: true, // 高亮选中行lineNumbers: true, // 显示行号styleSelectedText: true,line: true,foldGutter: true, // 块槽gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例mode: { // 模式, 可查看 codemirror/mode 中的所有模式name: 'javascript',json: true},// hint.js optionshintOptions: {// 当匹配只有一项的时候是否自动补全completeSingle: false},     // 快捷键 可提供三种模式 sublime、emacs、vimkeyMap: 'sublime',matchBrackets: true,showCursorWhenSelecting: true,theme: 'monokai', // 主题 extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定}}}},methods: {onCmReady3() {this.$refs.myCmGenerate.codemirror.setSize('400px', '400px')},onCmFocus(instance, event) {console.log(instance)console.log(event)},onCmCodeChange(instance, obj) {console.log(instance)console.log(obj)}}
}
</script>
<style>
.CodeMirror-scroll {overflow: scroll !important;margin-bottom: 0;margin-right: 0;padding-bottom: 0;height: 100%;outline: none;position: relative;border: 1px solid #dddddd;
}
</style>
<style lang="less" scoped>
.code-mirror{font-size : 13px;line-height : 150%;text-align: left;
}
</style>

• javascript 黑色风格，效果图如下：

• mysql 淡黄色风格
  
  将 theme 换成 'solarized light' , 然后将 mode 改成 'text/x-mysql'
  
  
•  白色主题风格
  
  将 theme 换成 'base16-light' 就行

更多支持的语言和主题可在源码中查看，或者参考这位作者的 codemirror API介绍 , 内容比较详细