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,做一个记录仅供分享。

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

往期好文推荐

相关推荐
web前端神器3 分钟前
指定阿里镜像原理
前端
枷锁—sha8 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha9 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
ldj202021 分钟前
SpringBoot为什么使用new RuntimeException() 来获取调用栈?
java·spring boot·后端
超龄超能程序猿22 分钟前
Spring 应用中 Swagger 2.0 迁移 OpenAPI 3.0 详解:配置、注解与实践
java·spring boot·后端·spring·spring cloud
群联云防护小杜25 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
江南一点雨30 分钟前
Tokenizer 和 BPE
后端
风象南34 分钟前
SpringBoot配置属性热更新的轻量级实现
java·spring boot·后端
洛阳泰山35 分钟前
Spring Boot 整合 Nacos 实战教程:服务注册发现与配置中心详解
java·spring boot·后端·nacos
DanB2438 分钟前
html复习
javascript·microsoft·html