前言：在 Vue?日常項目開發(fā)中，會遇到將后端傳回的代碼格式化輸出渲染，并支持用戶編輯的需求。實現(xiàn)方法有很多，可以分別使用 vue2-ace-editor??，?vue-prism-editor?，codemirror?等插件方法實現(xiàn)，下面對這三種方法的使用做一個總結(jié) 。
方法一：使用?vue2-ace-editor?插件實現(xiàn)
npm i vue2-ace-editor -S
// 或者
cnpm i vue2-ace-editor -S
<template><div class="codeEditBox"><editor v-model="code" @init="editorInit" @input='codeChange' lang="javascript" :options="editorOptions" theme="chrome"></editor></div>
</template><script>import Editor from 'vue2-ace-editor'export default {name: 'CodeEditor',components: {Editor},data() {return {// 雙向綁定的編輯器內(nèi)容值屬性code: 'console.log("Hello World");',editorOptions: {// 設(shè)置代碼編輯器的樣式enableBasicAutocompletion: true, //啟用基本自動完成enableSnippets: true, // 啟用代碼段enableLiveAutocompletion: true, //啟用實時自動完成tabSize: 2, //標(biāo)簽大小fontSize: 14, //設(shè)置字號showPrintMargin: false //去除編輯器里的豎線}}},methods: {// 編輯內(nèi)容改變時觸發(fā)codeChange(val) {val //console.log(val)},editorInit() {require('brace/theme/chrome')require('brace/ext/language_tools') //language extension prerequsite...require('brace/mode/yaml')require('brace/mode/json')require('brace/mode/less')require('brace/snippets/json')require('brace/mode/lua')require('brace/snippets/lua')require('brace/mode/javascript')require('brace/snippets/javascript')}}}
</script><style scoped>.codeEditBox {width: 100%;height: 200px;}
</style>
方法二：使用?vue-prism-editor?插件實現(xiàn)
npm i prismjs vue-prism-editor -S
// 或者
cnpm i prismjs vue-prism-editor
<template><div><prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter" :line-numbers="lineNumbers"></prism-editor></div>
</template><script>import { PrismEditor } from 'vue-prism-editor'import 'vue-prism-editor/dist/prismeditor.min.css'import { highlight, languages } from 'prismjs/components/prism-core'import 'prismjs/components/prism-clike'import 'prismjs/components/prism-javascript'import 'prismjs/themes/prism-tomorrow.css'export default {name: 'CodeEditor1',components: {PrismEditor},data: () => ({// 雙向綁定編輯器內(nèi)容值屬性code: 'console.log("Hello World");',// true為編輯模式， false只展示不可編輯lineNumbers: true }),methods: {highlighter(code) {return highlight(code, languages.js) //returns html}}}
</script><style lang="css" scoped>/* required class */.my-editor {background: #2d2d2d;color: #ccc;font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;font-size: 14px;line-height: 1.5;padding: 5px;}/* optional */.prism-editor__textarea:focus {outline: none;}/* not required: */.height-300 {height: 300px;}
</style>
方法三：使用?codemirror?插件實現(xiàn)
npm i codemirror -S
// 或者
npm i codemirror -S
<template><div class="in-coder-panel"><textarea ref="textarea"></textarea><el-select class="code-mode-select" v-model="mode" @change="changeMode" size="mini"><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'// 需要引入具體的語法高亮庫才會有對應(yīng)的語法高亮效果// codemirror 官方其實支持通過 /addon/mode/loadmode.js 和 /mode/meta.js 來實現(xiàn)動態(tài)加載對應(yīng)語法高亮庫// 但 vue 貌似沒有無法在實例初始化后再動態(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'// 嘗試獲取全局實例const CodeMirror = window.CodeMirror || _CodeMirrorexport default {name: 'CodeEditor2',// 父組件傳給子組件props: {// 內(nèi)容，用于實現(xiàn)雙向綁定value: String,// 語法類型language: {type: String,default: null}},data() {return {// 雙向綁定編輯器值屬性code: '',// 默認的語法類型mode: 'javascript',// 編輯器實例coder: null,// 默認配置options: {// 縮進格式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() {// 初始化編輯器實例，傳入需要被實例化的文本域?qū)ο蠛湍J配置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()// 由于真實值可能不規(guī)范，例如 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()// 允許父容器通過以下函數(shù)監(jiān)聽當(dāng)前的語法值this.$emit('language-change', label)}}}
</script><style lang="css" scoped>.in-coder-panel {position: relative;}.CodeMirror-code {line-height: 19px;text-align: left;}.code-mode-select {position: absolute;z-index: 2;right: 10px;top: 10px;max-width: 130px;}
</style>
【完整代碼示例：vue-code-editor: 在 VUE 中分別使用 vue2-ace-editor??，?vue-prism-editor?，codemirror?等插件嵌入代碼編輯器】
總結(jié)
以上是生活随笔為你收集整理的如何实现在 Vue 中嵌入代码编辑器 ？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
