vue2.x中monaco-editor的使用说明

目录

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

vue2中使用monaco-editor

安装

注意两个库的版本指定

npm install [email protected] --save-dev
npm install [email protected] --save-dev

配置

vue.config.js中配置

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin()
    ]
  }
}

创建MonacoEditor公共组件

父组件中使用

使用vue-monaco-editor遇到的坑

编辑器重复加载上次编辑器中的内容,不会被新的内容替代

直接上代码

给MonacoEditor加上属性key

每次重新给code赋值时，就重新获取一次随机数赋值给key

data() {
    return {
      randomkey: 123,
    }
  }
methods: {
    // 每次重新给code赋值时，就重新调用一下下面这个方法
    createRandomkey(){
      this.randomkey = Math.floor(Math.random()*(10,1000000012313))
    },
}

编辑器editorOptions上的配置无法生效

// 在data中设置无法生效
options: {
     readOnly: true
},

可以在@mounted方法中根据editor进行设置

seeOnMounted(editor) {
      this.seeEditor = editor
      this.seeEditor.updateOptions({
        readOnly: true, //是否只读
      })
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。