vuecodemirror實(shí)現(xiàn)在線代碼編譯器

第vuecodemirror實(shí)現(xiàn)在線代碼編譯器如果我們想在Web端實(shí)現(xiàn)在線代碼編譯的效果，那么需要使用組件vue-codemirror，他是將CodeMirror進(jìn)行了再次封裝

支持代碼高亮

62種主題顏色，例如monokai等等

支持json,sql,javascript，css，xml,html，yaml,markdown,python編輯模式，默認(rèn)為json

支持快速搜索

支持自動(dòng)補(bǔ)全提示

支持自動(dòng)匹配括號(hào)

npminstalljshint

npminstalljsonlint

npminstallscript-loader

npminstallvue-codemirror

我們可以在項(xiàng)目中的components中將vue-codemirror進(jìn)行再次封裝

template

codemirror

ref="myCm"

v-model="editorValue"

:options="cmOptions"

@changes="onCmCodeChanges"

@blur="onCmBlur"

@keydown.native="onKeyDown"

@mousedown.native="onMouseDown"

@paste.native="OnPaste"

/codemirror

/template

script

import{codemirror}from"vue-codemirror";

import'codemirror/keymap/sublime'

import"codemirror/mode/javascript/javascript.js";

import"codemirror/mode/xml/xml.js";

import"codemirror/mode/htmlmixed/htmlmixed.js";

import"codemirror/mode/css/css.js";

import"codemirror/mode/yaml/yaml.js";

import"codemirror/mode/sql/sql.js";

import"codemirror/mode/python/python.js";

import"codemirror/mode/markdown/markdown.js";

import"codemirror/addon/hint/show-hint.css";

import"codemirror/addon/hint/show-hint.js";

import"codemirror/addon/hint/javascript-hint.js";

import"codemirror/addon/hint/xml-hint.js";

import"codemirror/addon/hint/css-hint.js";

import"codemirror/addon/hint/html-hint.js";

import"codemirror/addon/hint/sql-hint.js";

import"codemirror/addon/hint/anyword-hint.js";

import"codemirror/addon/lint/lint.css";

import"codemirror/addon/lint/lint.js";

import"codemirror/addon/lint/json-lint";

import'codemirror/addon/selection/active-line'

import"codemirror/addon/hint/show-hint.js";

import"codemirror/addon/hint/anyword-hint.js";

require("script-loader!jsonlint");

import"codemirror/addon/lint/javascript-lint.js";

import"codemirror/addon/fold/foldcode.js";

import"codemirror/addon/fold/foldgutter.js";

import"codemirror/addon/fold/foldgutter.css";

import"codemirror/addon/fold/brace-fold.js";

import"codemirror/addon/fold/xml-fold.js";

import"codemirror/addon/fold/comment-fold.js";

import"codemirror/addon/fold/markdown-fold.js";

import"codemirror/addon/fold/indent-fold.js";

import"codemirror/addon/edit/closebrackets.js";

import"codemirror/addon/edit/closetag.js";

import"codemirror/addon/edit/matchtags.js";

import"codemirror/addon/edit/matchbrackets.js";

import"codemirror/addon/selection/active-line.js";

import"codemirror/addon/search/jump-to-line.js";

import"codemirror/addon/dialog/dialog.js";

import"codemirror/addon/dialog/dialog.css";

import"codemirror/addon/search/searchcursor.js";

import"codemirror/addon/search/search.js";

import"codemirror/addon/display/autorefresh.js";

import"codemirror/addon/selection/mark-selection.js";

import"codemirror/addon/search/match-highlighter.js";

exportdefault{

name:"index",

components:{codemirror},

props:["cmTheme","cmMode","cmIndentUnit","autoFormatJson"],

data(){

return{

editorValue:'{}',

cmOptions:{

theme:!this.cmTheme||this.cmTheme==="default""default":this.cmTheme,//主題

mode:!this.cmMode||this.cmMode==="default""application/json":this.cmMode,//代碼格式

tabSize:4,//tab的空格個(gè)數(shù)

indentUnit:!this.cmIndentUnit2:this.cmIndentUnit,//一個(gè)塊（編輯語(yǔ)言中的含義）應(yīng)縮進(jìn)多少個(gè)空格

autocorrect:true,//自動(dòng)更正

spellcheck:true,//拼寫檢查

lint:true,//檢查格式

lineNumbers:true,//是否顯示行數(shù)

lineWrapping:true,//是否自動(dòng)換行

styleActiveLine:true,//line選擇是是否高亮

keyMap:'sublime',//sublime編輯器效果

matchBrackets:true,//括號(hào)匹配

autoCloseBrackets:true,//在鍵入時(shí)將自動(dòng)關(guān)閉括號(hào)和引號(hào)

matchTags:{bothTags:true},//將突出顯示光標(biāo)周圍的標(biāo)簽

foldGutter:true,//可將對(duì)象折疊，與下面的gutters一起使用

gutters:[

"CodeMirror-lint-markers",

"CodeMirror-linenumbers",

"CodeMirror-foldgutter"

highlightSelectionMatches:{

minChars:2,

style:"matchhighlight",

showToken:true

enableAutoFormatJson:this.autoFormatJson==nulltrue:this.autoFormatJson,//json編輯模式下，輸入框失去焦點(diǎn)時(shí)是否自動(dòng)格式化，true開(kāi)啟，false關(guān)閉

created(){

try{

if(!this.editorValue){

this.cmOptions.lint=false;

return;

if(this.cmOptions.mode==="application/json"){

if(!this.enableAutoFormatJson){

return;

this.editorValue=this.formatStrInJson(this.editorValue);

}catch(e){

console.log("初始化codemirror出錯(cuò)："+e);

methods:{

resetLint(){

if(!this.$refs.myCm.codemirror.getValue()){

this.$nextTick(()={

this.$refs.myCm.codemirror.setOption("lint",false);

return;

this.$refs.myCm.codemirror.setOption("lint",false);

this.$nextTick(()={

this.$refs.myCm.codemirror.setOption("lint",true);

//格式化字符串為json格式字符串

formatStrInJson(strValue){

returnJSON.stringify(

JSON.parse(strValue),

null,

this.cmIndentUnit

onCmCodeChanges(cm,changes){

this.editorValue=cm.getValue();

this.resetLint();

//失去焦點(diǎn)時(shí)處理函數(shù)

onCmBlur(cm,event){

try{

leteditorValue=cm.getValue();

if(this.cmOptions.mode==="application/json"editorValue){

if(!this.enableAutoFormatJson){

return;

this.editorValue=this.formatStrInJson(editorValue);

}catch(e){

//啥也不做

//按下鍵盤事件處理函數(shù)

onKeyDown(event){

constkeyCode=event.keyCode||event.which||event.charCode;

constkeyCombination=

event.ctrlKey||event.altKey||event.metaKey;

if(!keyCombinationkeyCode64keyCode123){

this.$refs.myCm.codemirror.showHint({completeSingle:false});

//按下鼠標(biāo)時(shí)事件處理函數(shù)

onMouseDown(event){

this.$refs.myCm.codemirror.closeHint();

//黏貼事件處理函數(shù)

OnPaste(event){

if(this.cmOptions.mode==="application/json"){

try{

this.editorValue=this.formatStrInJson(this.editorValue);

}catch(e){

//啥都不做

/script

stylescoped

/style

此組件默認(rèn)配置了json編譯器，cmOptions中是代碼編譯器的配置項(xiàng)，需要額外的功能也可以去看官方文檔配置

接下來(lái)看展示效果

可以看到我們輸入了json格式的字符串，即使格式不正確，會(huì)給我們錯(cuò)誤提示，并且也會(huì)給我們自動(dòng)格式化

python編譯器

我們封裝的組件默認(rèn)是json編譯器，如果我們想使用其他語(yǔ)言，也很簡(jiǎn)單，只需要導(dǎo)入其他語(yǔ)言的mode

template

div

el-buttontype="primary"icon="el-icon-circle-check-outline"@click="handleConfirm"round

點(diǎn)擊保存

/el-button

el-buttonicon="el-icon-caret-right"type="info"@click="handl