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

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

<a name="dtPuX"></a>

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

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

大致如下圖：<br />

<a name="5wMJ3"></a>

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

<a name="VxgDb"></a>

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格式化，所以沒引入其他組件，<br />直接通過設置編輯器值來實現：代碼如下：

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

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

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

mode: 'application/json'

其他的配置語言可以查看https://codemirror.net/mode/<br />有關vue-codemirror的事件我就不再列舉，可以查看https://www.npmjs.com/package/vue-codemirror

3. codemirror驗證提示

1. 需要引入插件jsonlint

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

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

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

總結

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

回覆關鍵字：code, 就可以獲取源碼地址