在vue項(xiàng)目中怎么使用codemirror插件實(shí)現(xiàn)代碼編輯器功能
這篇文章主要為大家展示了“在vue項(xiàng)目中怎么使用codemirror插件實(shí)現(xiàn)代碼編輯器功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“在vue項(xiàng)目中怎么使用codemirror插件實(shí)現(xiàn)代碼編輯器功能”這篇文章吧。
創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元崆峒做網(wǎng)站,已為上家服務(wù),為崆峒各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
具體內(nèi)容如下所示：
1、使用npm安裝依賴
npm install --save codemirror;
2、在頁(yè)面中放入如下代碼
<template>
<textarea ref="mycode" class="codesql" v-model="code" ></textarea>
</template>
<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
export default {
name: "codeMirror",
data () {
return {
code: '//按Ctrl鍵進(jìn)行代碼提示'
}
},
mounted () {
debugger
let mime = 'text/x-mariadb'
//let theme = 'ambiance'//設(shè)置主題，不設(shè)置的會(huì)使用默認(rèn)主題
let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
mode: mime,//選擇對(duì)應(yīng)代碼編輯器的語(yǔ)言，我這邊選的是數(shù)據(jù)庫(kù)，根據(jù)個(gè)人情況自行設(shè)置即可
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
//theme: theme,
// autofocus: true,
extraKeys: {'Ctrl': 'autocomplete'},//自定義快捷鍵
hintOptions: {//自定義提示選項(xiàng)
tables: {
users: ['name', 'score', 'birthDate'],
countries: ['name', 'population', 'size']
}
}
})
//代碼自動(dòng)提示功能，記住使用cursorActivity事件不要使用change事件，這是一個(gè)坑，那樣頁(yè)面直接會(huì)卡死
editor.on('cursorActivity', function () {
editor.showHint()
})
}
}
</script>
<style>
.codesql {
font-size: 11pt;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
</style>3、直接上圖
以上是“在vue項(xiàng)目中怎么使用codemirror插件實(shí)現(xiàn)代碼編輯器功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：在vue項(xiàng)目中怎么使用codemirror插件實(shí)現(xiàn)代碼編輯器功能
當(dāng)前URL：http://www.chinadenli.net/article46/peijeg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、Google、企業(yè)網(wǎng)站制作、網(wǎng)站排名、面包屑導(dǎo)航、網(wǎng)站內(nèi)鏈
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
