锐客网

  1. 首页 > 睿知 > it技术 > >

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

目录

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

vue2中使用monaco-editor
安装
注意两个库的版本指定
npm install monaco-editor@0.30.1 --save-devnpm 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公共组件


.editor {width: 100%; min-height: 400px; }

父组件中使用



使用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 = editorthis.seeEditor.updateOptions({readOnly: true, //是否只读})},

【vue2.x中monaco-editor的使用说明】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：Java|Java Spring中Bean的作用域及生命周期

    下一篇：投稿|体验管理13问