vue使用浏览器编辑器monaco动态创建组件
安装Monaco：npm install monaco-editor --save
npm install monaco-editor-webpack-plugin --save-dev webpack4.0以上不需要安装
修改webpack.base.conf.js配置文件,如图：
修改配置文件防止build出现错误
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内容</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: "" //内容备份
};
},
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); //编辑器创建完成回调
self.monacoEditor.onDidChangeModelContent(function(event) {
//编辑器内容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>
monaco-editor编译器
获取相关文件格式代码
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;
}
