vue2.x中monaco-editor的使用说明
作者:风如也
这篇文章主要介绍了vue2.x中monaco-editor的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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, //是否只读 }) },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。