monaco-editor 是微软出的一条开源web在线编辑器
支持多种语言，代码高亮，代码提示等功能，与Visual Studio Code 功能几乎相同。
在项目中可能会用带代码编辑功能，或者展示代码。对于习惯使用vsCode的开发者来说使用monaco-editor是非常不错的选择。
安装依赖
cnpm install monaco-editor --save cnpm install monaco-editor-webpack-plugin --save-dev
修改webpack.base.conf.js配置文件,如图：
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
...
module.exports = {
...
plugins: [
...
new MonacoWebpackPlugin()
]
};
editor组件
<template>
<div class="myEditor">
<p>
<el-button type="success" icon="el-icon-check" circle @click="RunResult"></el-button>
</p>
<div id="container" ref="container" style="height:600px"></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, //代码提示延时
}
}
}
},
data(){
return{
}
},
mounted(){
let self = this;
function initEditor(){
self.$refs.container.innerHTML = '';
self.monacoEditor = monaco.editor.create(self.$refs.container, {
value:self.codes,
language: self.language,
theme: 'hc-black',//vs, hc-black, or vs-dark
editorOptions:self.editorOptions,
});
self.$emit('onMounted',self.monacoEditor);
}
initEditor();
window.addEventListener('resize',function(){
initEditor();
})
},
methods:{
RunResult(){
console.log(this.monacoEditor.getValue());
}
}
}
</script>
<style scoped>
#container{
height:100%;
text-align: left;
}
</style>
引用editor组件
<template>
<div>
<el-tabs type="border-card">
<el-tab-pane :lazy="true">
<span slot="label"><i class="el-icon-document"></i> HTML</span>
<MyEditor
:language="'html'"
:codes="htmlCodes"
@onMounted="htmlOnMounted"
@onCodeChange="htmlOnCodeChange" />
</el-tab-pane>
<el-tab-pane label="Javascript" :lazy="true">
<MyEditor
:language="'javascript'"
:codes="javascriptCodes"
@onMounted="javascriptOnMounted"
@onCodeChange="javascriptOnCodeChange" />
</el-tab-pane>
<el-tab-pane label="CSS" :lazy="true">
<MyEditor
:language="'css'"
:codes="cssCodes"
@onMounted="cssOnMounted"
@onCodeChange="cssOnCodeChange" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import MyEditor from './myEditor'
export default {
components:{
MyEditor
},
data () {
return {
htmlCodes:'<div>This is html</div>',
javascriptCodes:'console.log("This is javascript")',
cssCodes:'body{}',
htmlEditor:null,
jsEditor:null,
cssEditor:null,
}
},
methods:{
htmlOnMounted(edit){
this.htmlEditor = edit;
},
javascriptOnMounted(edit){
this.jsEditor = edit;
},
cssOnMounted(edit){
this.cssEditor = edit;
},
htmlOnCodeChange(){},
javascriptOnCodeChange(){},
cssOnCodeChange(){},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果图如下：