[轉]vue-codemirror 代碼編輯器

codemirror 是一個非常強大的代碼編輯器插件，但官方并沒有提供 vue 的支持版本，不過跟 vue 集成的步驟并不復雜，以下是具體實現

實現效果

具體實現

首先需要運行 npm i codemirror --save 在項目中安裝對應組件

<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">// 引入全局實例import _CodeMirror from 'codemirror'// 核心樣式import 'codemirror/lib/codemirror.css'// 引入主題后還需要在 options 中指定主題才會生效import 'codemirror/theme/cobalt.css'// 需要引入具體的語法高亮庫才會有對應的語法高亮效果// codemirror 官方其實支持通過 /addon/mode/loadmode.js 和 /mode/meta.js 來實現動態加載對應語法高亮庫// 但 vue 貌似沒有無法在實例初始化后再動態加載對應 JS ，所以此處才把對應的 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'// 嘗試獲取全局實例const CodeMirror = window.CodeMirror || _CodeMirrorexport default {name: 'in-coder',props: {// 外部傳入的內容，用于實現雙向綁定value: String,// 外部傳入的語法類型language: {type: String,default: null}},data () {return {// 內部真實的內容code: '',// 默認的語法類型mode: 'javascript',// 編輯器實例coder: null,// 默認配置options: {// 縮進格式tabSize: 2,// 主題，對應主題庫 JS 需要提前引入theme: 'cobalt',// 顯示行號lineNumbers: true,line: true},// 支持切換的語法高亮類型，對應 JS 已經提前引入// 使用的是 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 () {// 初始化編輯器實例，傳入需要被實例化的文本域對象和默認配置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}}},// 獲取當前語法類型_getLanguage (language) {// 在支持的語法類型列表中尋找傳入的語法類型return this.modes.find((mode) => {// 所有的值都忽略大小寫，方便比較let currentLanguage = language.toLowerCase()let currentLabel = mode.label.toLowerCase()let currentValue = mode.value.toLowerCase()// 由于真實值可能不規范，例如 java 的真實值是 x-java ，所以講 value 和 label 同時和傳入語法進行比較return currentLabel === currentLanguage || currentValue === currentLanguage})},// 更改模式changeMode (val) {// 修改編輯器的語法配置this.coder.setOption('mode', `text/${val}`)// 獲取修改后的語法let label = this._getLanguage(val).label.toLowerCase()// 允許父容器通過以下函數監聽當前的語法值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
版權聲明：本文為作者原創文章，轉載請附上博文鏈接！
內容解析By：CSDN,CNBLOG博客文章一鍵轉載插件