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

支持代碼高亮

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

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

支持快速搜索

支持自動補全提示

支持自動匹配括號

npminstalljshint

npminstalljsonlint

npminstallscript-loader

npminstallvue-codemirror

我們可以在項目中的components中將vue-codemirror進行再次封裝

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的空格個數

indentUnit:!this.cmIndentUnit2:this.cmIndentUnit,//一個塊（編輯語言中的含義）應縮進多少個空格

autocorrect:true,//自動更正

spellcheck:true,//拼寫檢查

lint:true,//檢查格式

lineNumbers:true,//是否顯示行數

lineWrapping:true,//是否自動換行

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

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

matchBrackets:true,//括號匹配

autoCloseBrackets:true,//在鍵入時將自動關閉括號和引號

matchTags:{bothTags:true},//將突出顯示光標周圍的標簽

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

gutters:[

"CodeMirror-lint-markers",

"CodeMirror-linenumbers",

"CodeMirror-foldgutter"

highlightSelectionMatches:{

minChars:2,

style:"matchhighlight",

showToken:true

enableAutoFormatJson:this.autoFormatJson==nulltrue:this.autoFormatJson,//json編輯模式下，輸入框失去焦點時是否自動格式化，true開啟，false關閉

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出錯："+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();

//失去焦點時處理函數

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){

//啥也不做

//按下鍵盤事件處理函數

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});

//按下鼠標時事件處理函數

onMouseDown(event){

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

//黏貼事件處理函數

OnPaste(event){

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

try{

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

}catch(e){

//啥都不做

/script

stylescoped

/style

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

接下來看展示效果

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

python編譯器

我們封裝的組件默認是json編譯器，如果我們想使用其他語言，也很簡單，只需要導入其他語言的mode

template

div

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

點擊保存

/el-button

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