在vue項目中使用codemirror插件實現代碼編輯器功能（代碼高亮顯示及自動提示）

1、使用npm安裝依賴

npm install --save codemirror;

2、在頁面中放入如下代碼

<template>
  <div>
    <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea>
  </div>
</template>
<script>
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'

let CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
export default {
  name: 'CodeMirror',
  data () {
    return {
      code: '//按Ctrl鍵進行代碼提示'
    }
  },
  mounted () {
    debugger
    let mime = 'text/x-mariadb'
    // let theme = 'ambiance'//設置主題，不設置的會使用默認主題
    let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: mime, // 選擇對應代碼編輯器的語言，我這邊選的是數據庫，根據個人情況自行設置即可
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      // theme: theme,
      // autofocus: true,
      // extraKeys: { Ctrl: 'autocomplete' }, // 自定義快捷鍵
      hintOptions: {
        // 自定義提示選項
        tables: {
          users: ['name', 'score', 'birthDate'],
          countries: ['name', 'population', 'size']
        }
      }
    })
    // 代碼自動提示功能，記住使用cursorActivity事件不要使用change事件，這是一個坑，那樣頁面直接會卡死
    editor.on('cursorActivity', function () {
      editor.showHint()
    })
  }
}
</script>

<style>
.codesql {
  font-size: 11pt;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
</style>

　　

編譯器的事件觸發器
觸發器使用方法：(change事件為例)

this.CodeMirrorEditor.on("change",function(){
//事件觸發后執行事件
alert("change")
});
1
2
3
4
取消觸發器方法：

this.CodeMirrorEditor.off("change")
1
“changes”：每次編輯器內容更改時觸發
“beforeChange”：事件在更改生效前觸發
“cursorActivity”：當光標或選中(內容)發生變化，或者編輯器的內容發生了更改的時候觸發。
“keyHandled”:快捷鍵映射(key map)中的快捷鍵被處理(handle)后觸發
“inputRead”:當用戶輸入或粘貼時編輯器時觸發。
“electrictInput”:收到指定的electrict輸入時觸發
“beforeSelectionChange”:此事件在選中內容變化前觸發
“viewportChange”：編輯器的視口( view port )改變（滾動，編輯或其它動作）時觸發
“gutterClick”：編輯器的gutter(行號區域)點擊時觸發
“focus”：編輯器收到焦點時觸發
“blur”:編輯器失去焦點時觸發
“scroll”:編輯器滾動條滾動時觸發
“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件觸發器
API
this.CodeMirrorEditor.setValue(“Hello Kitty”)：設置編輯器內容
this.CodeMirrorEditor.getValue()：獲取編輯器內容
this.CodeMirrorEditor.getLine(n):獲取第n行的內容
this.CodeMirrorEditor.lineCount()：獲取當前行數
this.CodeMirrorEditor.lastLine()：獲取最后一行的行號
this.CodeMirrorEditor.isClean():boolean類型判斷編譯器是否是clean的
this.CodeMirrorEditor.getSelection()：獲取選中內容
this.CodeMirrorEditor.getSelections():返回array類型選中內容
this.CodeMirrorEditor.replaceSelection(“替換后的內容”):替換選中的內容
this.CodeMirrorEditor.getCursor():獲取光標位置,返回{line,char}
this.CodeMirrorEditor.setOption("",""):設置編譯器屬性
this.CodeMirrorEditor.getOption(""):獲取編譯器屬性
this.CodeMirrorEditor.addKeyMap("",""):添加key-map鍵值，該鍵值具有比原來鍵值更高的優先級
this.CodeMirrorEditor.removeKeyMap（""）:移除key-map
this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…沒試出效果
this.CodeMirrorEditor.removeOverlay（""）:移除Overlay
this.CodeMirrorEditor.setSize(width,height):設置編譯器大小
this.CodeMirrorEditor.scrollTo(x,y):設置scroll到position位置
this.CodeMirrorEditor.refresh():刷新編輯器
this.CodeMirrorEditor.execCommand(“命令”):執行命令