您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 506人已围观

简介 vue2.x中monaco-editor的使用说明_vue.js_

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公共组件

父组件中使用

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

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

您可能感兴趣的文章:

上一篇：vue实现录音功能js-audio-recorder带波浪图效果的示例_vue.js_

下一篇：OpenCV.js实现乔丹动图素描效果图文教程_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网