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

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

往期好文推荐

相关推荐
青皮桔28 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺28 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear31 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息33 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月34 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201838 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿39 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘39 分钟前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp