codemirror mysql_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 文件

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

mysql 淡黄色风格

将 theme 换成 'solarized light' , 然后将 mode 改成 'text/x-mysql'

白色主题风格

将 theme 换成 'base16-light' 就行

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