如何高效在vue2.x项目中集成并使用monaco-editor编辑器？

本文共计647个文字，预计阅读时间需要3分钟。

目录 + Vue2中使用Monaco Editor + 安装 + 配置 + 创建MonacoEditor公共组件 + 使用vue-monaco-editor遇到的坑 + 编辑器重复加载内容，不会被新内容替代 + editorOptions上的配置无法生效

目录

• vue2中使用monaco-editor
• 安装
• 配置
• 创建MonacoEditor公共组件
• 使用vue-monaco-editor遇到的坑
• 编辑器重复加载上次编辑器中的内容,不会被新的内容替代
• 编辑器editorOptions上的配置无法生效

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, //是否只读       })     },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。