vue2中使用monaco-editor
安装
注意两个库的版本指定
npm install monaco-editor@0.30.1 --save-dev npm install monaco-editor-webpack-plugin@6.0.0 --save-dev
配置
vue.config.js中配置
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin()
]
}
}创建MonacoEditor公共组件
<template> <div ref="editorContainer" class="editor"></div> </template>
<script>
import * as monaco from 'monaco-editor';
export default {
name: 'MonacoEditor',
data() {
return {
code: '',
editor: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 初始化编辑器
this.editor = monaco.editor.create(this.$refs.editorContainer, {
value: this.code,
language: 'javascript',
tabSize: 2,
scrollBeyondLastLine: false,
automaticLayout: true, // 自动布局
readOnly: false
})
console.log(this.editor)
// 监听内容变化
this.editor.onDidChangeModelContent(() => {
})
// 监听失去焦点事件
this.editor.onDidBlurEditorText((e) => {
console.log(e)
});
},
// 获取编辑框内容
getCodeContext() {
return this.editor.getValue()
},
// 自动格式化代码
format() {
this.editor.trigger('anything', 'editor.action.formatDocument')
// 或者
// this.editor.getAction(['editor.action.formatDocument']).run()
},
changeEditor() {
if (this.editor === null) {
this.init()
}
const oldModel = this.editor.getModel()
const newModel = monaco.editor.createModel(
this.code,
'javascript'
)
if (oldModel) {
oldModel.dispose()
}
this.editor.setModel(newModel)
}
}
}
</script><style scoped>
.editor {
width: 100%;
min-height: 400px;
}
</style>父组件中使用
<template> <div> <monaco-editor></monaco-editor> </div> </template>
<script>
import MonacoEditor from '@/components/MonacoEditor'
export default {
name: 'Test6',
components: {
MonacoEditor
}
}
</script>使用vue-monaco-editor遇到的坑
编辑器重复加载上次编辑器中的内容,不会被新的内容替代
直接上代码
给MonacoEditor加上属性key
<MonacoEditor width="100%" height="537" :key="randomkey" language="html" theme="vs-dark" :code="code" > </MonacoEditor>
每次重新给code赋值时，就重新获取一次随机数赋值给key
data() {
return {
randomkey: 123,
}
}
methods: {
// 每次重新给code赋值时，就重新调用一下下面这个方法
createRandomkey(){
this.randomkey = Math.floor(Math.random()*(10,1000000012313))
},
}编辑器editorOptions上的配置无法生效
<MonacoEditor
width="100%"
height="537"
:key="randomkey"
language="html"
theme="vs-dark"
:code="code"
:editorOptions="options"
@mounted="seeOnMounted"
>
// 在data中设置无法生效
options: {
readOnly: true
},可以在@mounted方法中根据editor进行设置
seeOnMounted(editor) {
this.seeEditor = editor
this.seeEditor.updateOptions({
readOnly: true, //是否只读
})
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。