教你輕鬆搞定vue-codemirror的基本用法：主要實現代碼編輯、驗證提示、代碼格式化

2017年的時候用過codemirror,當時用的是jQuery庫、codemirror、beautify插件。主要實現代碼的編輯功能、插入一些變量功能、beautify插件主要用來格式化代碼，實現代碼美化效果。不過這兩年作項目都是用vue了，須要用到代碼編輯器，因而我又找到了代碼編輯器vue-codemirror，感受組件再變，其原理、底層仍是沒多大變化，用vu e-codemirror,codemirror的方法，配置參數都是通用的，今天我就來分享一下我今天研究的vue-codemirror用法及一些坑的填法。我須要聲明一點是咱們項目用到的是框架ant-design-vue,因此彈窗我也直接拿來用了，有不懂的童鞋，能夠參考www.antdv.com/components/…。

1. 須要實現codemirror編輯器功能，主要是json數據的編輯

• codemirror基本的編輯代碼功能
• 插入變量功能
• codemirror驗證功能：主要驗證代碼格式，語法等，給出相應的提示
• 代碼格式化（因爲主要是json數據，因此暫時沒引用其餘組件，若是須要建議引用js-beautify，由於查資料發現codemirror在新的版本中已經去掉autoFormatRange方法）

大體以下圖：

2. 寫功能前須要安裝的一些組件及用法簡單說明，vue的就不說了，就光說這個編輯器須要的

2.1 vue-codemirror

1. 安裝vue-codemirror

npm install vue-codemirror --save
複製代碼

2. vue-codemirror簡單介紹

// require component
import { codemirror } from 'vue-codemirror'
import jsonlint from 'jsonlint' //lint驗證須要的組件，在下面詳細講
 
// require styles
import 'codemirror/lib/codemirror.css'
 
// require more codemirror resource...

import 'codemirror/mode/javascript/javascript' // 這js模式必須引入的

import 'codemirror/addon/selection/active-line' //光標行背景高亮，配置裏面也須要styleActiveLine設置爲true
import 'codemirror/keymap/sublime' //sublime編輯器效果
import 'codemirror/mode/css/css'
import 'codemirror/theme/monokai.css' //編輯器主題樣式，配置裏面theme須要設置monokai

//下面這幾個引入的主要是驗證提示類的,配置裏的lint須要設置true,gutters: ['CodeMirror-lint-markers']
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/display/autorefresh' //及時自動更新，配置裏面也須要設置autoRefresh爲true

 // view
<codemirror
          ref="jsonEditor"
          v-model="jsonData"
          :options="options"
          style="height: 600px;"
        />
// component
export default {
  components: {
    codemirror
  }
}
複製代碼

2.2 如何獲取編輯器對象調用方法

這個跟codemirror仍是有區別的，codemirror咱們須要初始化編輯器，而後拿着初始化對象就能夠調用方法了，vu e-codemirror怎麼獲取呢？其實很簡單，咱們在編輯器組件上加上ref，經過ref獲取。這個能夠放到vue的computed裏面，代碼以下:

.../
computed: {
	codemirror () {
      return this.$refs.jsonEditor.codemirror
    }
}
複製代碼

這樣咱們在須要調用方法的時候能夠調用這個編輯器對象，咱們能夠設置獲取編輯器的值。

2.3 插入變量是編輯器對象調用replaceSelection方法，以下代碼：

methods: {
insertVar () {
      this.codemirror.replaceSelection('"{{lanfeng}}"')
    }
}
複製代碼

2.4 代碼格式化

因爲實現的json格式化，因此沒引入其餘組件，
直接經過設置編輯器值來實現：代碼以下：

this.$nextTick(() => {
          this.codemirror.setValue((JSON.stringify(JSON.parse(this.jsonData), null, 2)))
        })
複製代碼

其實就是調用的setValue設置值，之因此用$nextTick，是因爲彈窗剛加載的時候，有可能編輯器沒初始化好，獲取不到編輯器對象。

2.5 codemirror的配置,mode設置支持的語言

mode: 'application/json'
複製代碼

其餘的配置語言能夠查看codemirror.net/mode/
有關vue-codemirror的事件我就再也不列舉，能夠查看www.npmjs.com/package/vue…

3. codemirror驗證提示

1. 須要引入插件jsonlint

剛開始按文檔引入lint資源的時候，發現不起做用，設置了可多，也不起做用，後來查看源碼發現依賴這個插件

npm install jsonlint --save  //npm 安裝組件
import jsonlint from 'jsonlint' //引入
window.jsonlint = jsonlint  //全局化
複製代碼

關於這個功能浪費了不少時間，當試用不成功想着引用別的插件來解決，後來看看源碼，仍是用了jsonlint 插件

總結

以上就是我分享的有關vue-codemirror代碼編輯器實現的json數據編輯、json數據語法驗證提示、及編輯器一些方法的用法，其實有個功能還沒實現，就是實現代碼摺疊，這個還在研究中，以上僅代碼我我的觀點，若有錯誤，請多指正。
關注lovepythoncn

回覆關鍵字：code, 就能夠獲取源碼地址 **