正在创建CodeMirror动态呈现问题

Creating CodeMirror dynamically - rendering issues

本文关键字:问题 动态 CodeMirror 创建      更新时间:2023-09-26

我最近开始开发一个通过CodeMirror进行操作的类-动态链接必要的库,提供与服务器的通信等等。
因此,我将所有内容都保存在变量中,并且在初始化时,CodeMirror被附加到不在文档树中的DOM节点。就像这样:

 var holder = document.createElement("div");  
 var textarea = document.createElement("textarea");     
 holder.appendChild(textarea);
 this.editor = CodeMirror.fromTextArea(textarea, {/*options*/});

然后,当.show()方法被调用到我的类时,我自己附加DIV:

 this.show(node) {
   if(this.editor!=null) {
     node.parentNode.replaceChild(holder,node);
   }
 }

编辑器是可以的,因为点击它并尝试绘制,或者在我调整窗口大小之后。但之前,我只看到空白区域和禁用的滚动条。我相信这是因为我初始化整个CodeMirror的方式
那么,如果我想保持我的班级结构,我应该怎么做才能让它发挥作用呢?链接到实时代码(不适用于IE)。

一种更直接的方法是在显示CodeMirror实例后在其上调用.refresh()。请参阅http://codemirror.net/doc/manual.html#refresh

所以我很简单地解决了这个问题-我在向dom树添加编辑器后调度onresize事件:

node.parentNode.replaceChild(holder,node);
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

基于如何调度调整大小事件?问题