Monaco编辑器踩坑

上一篇文章讲到了monaco的一个初始化,和它的一些配置等数据问题,今天来用一个demo的踩坑补充一下我遇到的各种坑的一些补充 主要功能是在一个Modal框中生成一个monaco编辑器

初始化monaco

js 复制代码
var diffEditor = null
    export default {

对于初始化一个monaco编辑器,我们可以把diffEditor放到全局的条件下去命名,不然会导致初始化和赋值的失败,因为在当前的功能下初始化和赋值这两部分是分开的

初始化的顺序

js 复制代码
<span style="color: rgb(45, 183, 245)" @click="showEditor(index)">查看</span>
<Modal
    v-model="editorShow"
>
    <div id="container" style="height:500px;width:100%"></div>

</Modal>
 showEditor(idx){
    this.editorShow = true;
    this.initMonaco()
    this.getDataHistory(this.chainRecords[idx])//赋值 setmodal的操作,具体你可以看上一篇文章
    this.getDataHistoryOld(this.chainRecords[idx+1])
},

showEditor的作用是用来打开Modal窗口的 当我用上面这个写法的时候,会出现monaco没有成功加载的现象

可以看到上面这个图,整个编辑器都没有被加载出来

因为我对editorShow设置为true 然后直接去init我的monaco编辑器

js 复制代码
diffEditor = monaco.editor.createDiffEditor(
    document.getElementById('container'),
    {readOnly:false}
);

上面这部分是init的代码,无非就是获取container属性然后讲monaco实例化上去,

这部分我觉得是因为弹框的editorShow显示属性刚刚被设置为true,可能节点还未加载到页面的时候就去初始化monaco,所以给这个地方加上了个nextTick,让初始化化的步骤晚一步进行操作

js 复制代码
 showEditor(idx){
    this.editorShow = true;
    this.getDataHistory(this.chainRecords[idx])//赋值 setmodal的操作,具体你可以看上一篇文章
    this.getDataHistoryOld(this.chainRecords[idx+1])
    this.nextTick(()=>{
        this.initMonaco()
    })
},

先给两个diff的modal做一个赋值,并且打开Modal的弹框,当nextTick下一个循环的时候,再去根据已经写好的两个modal来初始化生成我们的monaco编辑器。

结果是可以看到整个编辑器的

多次初始化

不知道是因为什么原因,每次当调用init去初始化一个monaoco编辑器的时候,都会多生成一个编辑器出来,按照我的想法container只有一个,每次获取到的只有一个

但实际上每次初始化的时候都会多生成一个monocao出来,具体表现为下面这个情况

以红线开始的地方,上面和下面分别是两个monaco,这是由于初始化出来的原因,但是由于一开始已经定义了一个全局的变量diffEditor,所以在这块可以加一个判断

js 复制代码
initMonaco () {
    //当diffEditor已经存在的时候,就不要再去创建一个初始化的monaco
                if (!diffEditor) {
                    diffEditor = monaco.editor.createDiffEditor(
                        document.getElementById('container'),
                        { readOnly: false }
                    );
                }

当diffEditor已经存在的时候,就不要再去创建一个初始化的monaco,这里去做一个判断,之后就会只生成一个monaco

如果需要装入不同的数据,只需要改变setmodal的内容即可

总结

以上分析了几点在Monaco编辑器开发的一些踩坑bug,做一个记录仅供分享。

如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!

往期好文推荐

相关推荐
程序员张344 分钟前
SpringBoot计时一次请求耗时
java·spring boot·后端
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
程序员岳焱7 小时前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化