安裝Monaco：npm install monaco-editor --save
npm install monaco-editor-webpack-plugin --save-dev webpack4.0以上不需要安裝
修改webpack.base.conf.js配置文件,如圖：
editor組件
<template>
????<div?class="myEditor">
????????<div?id="container"?ref="container"?style="height:600px;width:100%;"></div>
????</div>
</template>
<script>
import?*?as?monaco?from?"monaco-editor";
export?default?{
??props:?{
????codes:?{
??????type:?String,
??????default:?function()?{
????????return?"<div>請編輯html內(nèi)容</div>";
??????}
????},
????language:?{
??????type:?String,
??????default:?function()?{
????????return?"html";
??????}
????},
????editorOptions:?{
??????type:?Object,
??????default:?function()?{
????????return?{
??????????selectOnLineNumbers:?true,
??????????roundedSelection:?false,
??????????readOnly:?false,?//?只讀
??????????cursorStyle:?"line",?//光標樣式
??????????automaticLayout:?false,?//自動布局
??????????glyphMargin:?true,?//字形邊緣
??????????useTabStops:?false,
??????????fontSize:?28,?//字體大小
??????????autoIndent:?true?//自動布局
??????????//quickSuggestionsDelay:?500,???//代碼提示延時
????????};
??????}
????},
????//?切換背景色?vs默認??hc-black高亮?vs-dark深色?
????changeTheme:?{
??????type:?String,
??????default:?function()?{
????????return?"vs";
??????}
????}
??},
??data()?{
????return?{
??????monaco:?"",
??????codesCopy:?""?//內(nèi)容備份
????};
??},
??mounted()?{
????this.initEditor();
??},
??methods:?{
????initEditor()?{
??????let?self?=?this;
??????self.$refs.container.innerHTML?=?"";
??????self.monacoEditor?=?monaco.editor.create(self.$refs.container,?{
????????value:?self.codesCopy?||?self.codes,
????????language:?self.language,
????????theme:?self.changeTheme,?//vs,?hc-black,?or?vs-dark
????????editorOptions:?self.editorOptions
??????});
??????self.$emit("onMounted",?self.monacoEditor);?//編輯器創(chuàng)建完成回調(diào)
??????self.monacoEditor.onDidChangeModelContent(function(event)?{
????????//編輯器內(nèi)容changge事件
????????self.codesCopy?=?self.monacoEditor.getValue();
????????self.$emit("onCodeChange",?self.monacoEditor.getValue(),?event);
??????});
????},
????RunResult()?{
????},
????themeChange(val)?{
??????this.initEditor();
????}
??}
};
</script>
<style?scoped>
#container?{
??height:?100%;
??text-align:?left;
}
</style>
引用editor組件
<template>
??<div>
????<el-tabs?type="border-card">
??????<el-tab-pane?v-for="(item,index)?in?tableTabs"?:key='index'?:label="item.title"?:lazy="true">
????????<span?slot="label">
??????????<i?class="el-icon-document"></i>?{{item.title}}</span>
????????<MyEditor?:language="`${item.language}`"?:codes="item.languageCodes"??@onCodeChange="CodeChange(item.OnCodeChange,$event)"?:changeTheme='changeTheme'?/>
??????</el-tab-pane>
????</el-tabs>
????<div?style="margin:20px;text-align:right;">
??????<el-button?type="primary"?@click="bindsubmit">提交</el-button>
????</div>
????<component?v-bind:is="currentView"?ref='view'?/>
??</div>
</template>
<script>
import?MyEditor?from?"./myEditor";
import?comScript?from?"../comscript.js";
import?*?as?monaco?from?"monaco-editor";
export?default?{
??components:?{
????MyEditor
??},
??data()?{
????return?{
??????tableTabs:?[
????????{
??????????title:?"HTML",
??????????language:?"html",
??????????languageCodes:?"",
??????????OnCodeChange:?"htmlOnCodeChange",
??????????Mounted:?"htmlOnMounted"
????????},
????????{
??????????title:?"JavaScript",
??????????language:?"javascript",
??????????languageCodes:?"",
??????????OnCodeChange:?"javascriptOnCodeChange",
??????????Mounted:?"javascriptOnMounted"
????????},
????????{
??????????title:?"CSS",
??????????language:?"css",
??????????languageCodes:?"body{}",
??????????OnCodeChange:?"cssOnCodeChange",
??????????Mounted:?"cssOnMounted"
????????},
????????{
??????????title:?"JSON",
??????????language:?"json",
??????????languageCodes:?"{}",
??????????OnCodeChange:?"jsonOnCodeChange",
??????????Mounted:?"jsonOnMounted"
????????}
??????],
??????currentView:?"div",
??????changeTheme:?"hc-black"
????};
??},
??mounted()?{},
??methods:?{
????CodeChange(methodsName,event)?{
??????this[methodsName](event);
????},
????htmlOnCodeChange(value)?{
??????this.htmlEditor?=?value;
????},
????javascriptOnCodeChange(value)?{
??????this.jsEditor?=?value;
????},
????cssOnCodeChange(value)?{
??????this.cssEditor?=?value;
????},
????jsonOnCodeChange(value)?{
??????this.jsonEditor?=?value;
????},
????bindsubmit()?{
??????let?jsComponnent?=?eval(`(function(){
????????return?${this.jsEditor}
??????})()`);
??????this.currentView?=?comScript(this.htmlEditor,?jsComponnent);
??????this.$nextTick(()?=>?{
????????if?(this.cssEditor)?this.getCss(this.cssEditor);
??????});
????},
????getCss(data)?{
??????let?that?=?this;
??????let?style?=?document.createElement("style");
??????style.type?=?"text/css";
??????let?text?=?document.createTextNode(data);
??????style.appendChild(text);
??????that.$refs.view.$el.appendChild(style);
????}
??}
};
</script>
<style?scoped>
</style>
獲取相關(guān)文件格式代碼
export?default?function?get()?{
??let?[...args]?=?arguments;
??let?component?=?{};
??component.template?=?args[0];
??component.data?=?args[1].data;
??component.methods?=?args[1].methods;
??component.inject?=?args[1].inject;
??return?component;
}
