Monaco编辑器踩坑
上一篇文章讲到了monaco的一个初始化，和它的一些配置等数据问题，今天来用一个demo的踩坑补充一下我遇到的各种坑的一些补充 主要功能是在一个Modal框中生成一个monaco编辑器
初始化monaco
var diffEditor = null
export default {
对于初始化一个monaco编辑器，我们可以把diffEditor放到全局的条件下去命名，不然会导致初始化和赋值的失败，因为在当前的功能下初始化和赋值这两部分是分开的
初始化的顺序
<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编辑器
diffEditor = monaco.editor.createDiffEditor(
document.getElementById('container'),
{readOnly:false}
);
上面这部分是init的代码，无非就是获取container属性然后讲monaco实例化上去，
这部分我觉得是因为弹框的editorShow显示属性刚刚被设置为true，可能节点还未加载到页面的时候就去初始化monaco，所以给这个地方加上了个nextTick，让初始化化的步骤晚一步进行操作
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，所以在这块可以加一个判断
initMonaco () {
//当diffEditor已经存在的时候，就不要再去创建一个初始化的monaco
if (!diffEditor) {
diffEditor = monaco.editor.createDiffEditor(
document.getElementById('container'),
{ readOnly: false }
);
}
当diffEditor已经存在的时候，就不要再去创建一个初始化的monaco，这里去做一个判断，之后就会只生成一个monaco
如果需要装入不同的数据，只需要改变setmodal的内容即可
总结
以上分析了几点在Monaco编辑器开发的一些踩坑bug，做一个记录仅供分享。