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, // tab
styleActiveLine: 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 options
hintOptions: {
// 當匹配只有一項的時候是否自動補全
completeSingle: false
},
// 快捷鍵 可提供三種模式 sublime、emacs、vim
keyMap: '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介紹 , 內容比較詳細