?

codemirror 是一個非常強(qiáng)大的代碼編輯器插件，但官方并沒有提供 vue 的支持版本，不過跟 vue 集成的步驟并不復(fù)雜，以下是具體實(shí)現(xiàn)

?

更多精彩

?

• 更多技術(shù)博客，請移步 IT人才終生實(shí)訓(xùn)與職業(yè)進(jìn)階平臺 - 實(shí)訓(xùn)在線

?

相關(guān)網(wǎng)址

?

Vue 官方插件庫推薦的集成實(shí)現(xiàn)

• 這個實(shí)現(xiàn)做的比較全面，但不支持動態(tài)語法高亮的切換

codemirror 支持的語言類型

codemirror 官網(wǎng)

?

實(shí)現(xiàn)效果

?

?

具體實(shí)現(xiàn)

?

首先需要運(yùn)行 npm i codemirror --save 在項(xiàng)目中安裝對應(yīng)組件

?

<template><div class="in-coder-panel"><textarea ref="textarea"></textarea><el-select class="code-mode-select" v-model="mode"@change="changeMode"><el-option v-for="mode in modes":key="mode.value" :label="mode.label" :value="mode.value"></el-option></el-select></div> </template><script type="text/ecmascript-6">// 引入全局實(shí)例import _CodeMirror from 'codemirror'// 核心樣式import 'codemirror/lib/codemirror.css'// 引入主題后還需要在 options 中指定主題才會生效import 'codemirror/theme/cobalt.css'// 需要引入具體的語法高亮庫才會有對應(yīng)的語法高亮效果// codemirror 官方其實(shí)支持通過 /addon/mode/loadmode.js 和 /mode/meta.js 來實(shí)現(xiàn)動態(tài)加載對應(yīng)語法高亮庫// 但 vue 貌似沒有無法在實(shí)例初始化后再動態(tài)加載對應(yīng) JS ，所以此處才把對應(yīng)的 JS 提前引入import 'codemirror/mode/javascript/javascript.js'import 'codemirror/mode/css/css.js'import 'codemirror/mode/xml/xml.js'import 'codemirror/mode/clike/clike.js'import 'codemirror/mode/markdown/markdown.js'import 'codemirror/mode/python/python.js'import 'codemirror/mode/r/r.js'import 'codemirror/mode/shell/shell.js'import 'codemirror/mode/sql/sql.js'import 'codemirror/mode/swift/swift.js'import 'codemirror/mode/vue/vue.js'// 嘗試獲取全局實(shí)例const CodeMirror = window.CodeMirror || _CodeMirrorexport default {name: 'in-coder',props: {// 外部傳入的內(nèi)容，用于實(shí)現(xiàn)雙向綁定value: String,// 外部傳入的語法類型language: {type: String,default: null}},data () {return {// 內(nèi)部真實(shí)的內(nèi)容code: '',// 默認(rèn)的語法類型mode: 'javascript',// 編輯器實(shí)例coder: null,// 默認(rèn)配置options: {// 縮進(jìn)格式tabSize: 2,// 主題，對應(yīng)主題庫 JS 需要提前引入theme: 'cobalt',// 顯示行號lineNumbers: true,line: true},// 支持切換的語法高亮類型，對應(yīng) JS 已經(jīng)提前引入// 使用的是 MIME-TYPE ，不過作為前綴的 text/ 在后面指定時寫死了modes: [{value: 'css',label: 'CSS'}, {value: 'javascript',label: 'Javascript'}, {value: 'html',label: 'XML/HTML'}, {value: 'x-java',label: 'Java'}, {value: 'x-objectivec',label: 'Objective-C'}, {value: 'x-python',label: 'Python'}, {value: 'x-rsrc',label: 'R'}, {value: 'x-sh',label: 'Shell'}, {value: 'x-sql',label: 'SQL'}, {value: 'x-swift',label: 'Swift'}, {value: 'x-vue',label: 'Vue'}, {value: 'markdown',label: 'Markdown'}]}},mounted () {// 初始化this._initialize()},methods: {// 初始化_initialize () {// 初始化編輯器實(shí)例，傳入需要被實(shí)例化的文本域?qū)ο蠛湍J(rèn)配置this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)// 編輯器賦值this.coder.setValue(this.value || this.code)// 支持雙向綁定this.coder.on('change', (coder) => {this.code = coder.getValue()if (this.$emit) {this.$emit('input', this.code)}})// 嘗試從父容器獲取語法類型if (this.language) {// 獲取具體的語法類型對象let modeObj = this._getLanguage(this.language)// 判斷父容器傳入的語法是否被支持if (modeObj) {this.mode = modeObj.label}}},// 獲取當(dāng)前語法類型_getLanguage (language) {// 在支持的語法類型列表中尋找傳入的語法類型return this.modes.find((mode) => {// 所有的值都忽略大小寫，方便比較let currentLanguage = language.toLowerCase()let currentLabel = mode.label.toLowerCase()let currentValue = mode.value.toLowerCase()// 由于真實(shí)值可能不規(guī)范，例如 java 的真實(shí)值是 x-java ，所以講 value 和 label 同時和傳入語法進(jìn)行比較return currentLabel === currentLanguage || currentValue === currentLanguage})},// 更改模式changeMode (val) {// 修改編輯器的語法配置this.coder.setOption('mode', `text/${val}`)// 獲取修改后的語法let label = this._getLanguage(val).label.toLowerCase()// 允許父容器通過以下函數(shù)監(jiān)聽當(dāng)前的語法值this.$emit('language-change', label)}}} </script><style lang="stylus" rel="stylesheet/stylus">.in-coder-panelflex-grow 1display flexposition relative.CodeMirrorflex-grow 1z-index 1.CodeMirror-codeline-height 19px.code-mode-selectposition absolutez-index 2right 10pxtop 10pxmax-width 130px </style>

---------------------
作者：asing1elife
來源：CSDN
原文：https://blog.csdn.net/asing1elife/article/details/89249154
版權(quán)聲明：本文為作者原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
內(nèi)容解析By：CSDN,CNBLOG博客文章一鍵轉(zhuǎn)載插件

總結(jié)

以上是生活随笔為你收集整理的[转]vue-codemirror 代码编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。