Bootstrap隐藏标签页内CodeMirror初始化后首次切换不显示问题求解

问题根因 #

隐藏状态的Bootstrap标签页容器样式为display: none，CodeMirror在不可见元素内初始化时无法正确计算容器宽高，导致首次渲染内容缺失，点击触发页面重绘后才会正常显示。

修复方案 #

方案1：监听标签显示事件调用refresh重绘 #

页面加载时正常初始化所有标签内的CodeMirror实例，监听Bootstrap标签页的显示事件，首次切换到对应标签时调用CodeMirror内置的refresh()方法强制重绘即可。

// 1. 初始化时把所有编辑器实例按对应标签ID存储
this.editors = {}
// 示例：初始化css标签编辑器
const code_element = document.getElementById('css');
code_element.value = message.css;
this.editors['css'] = CodeMirror.fromTextArea(code_element, {lineNumbers: false, mode:"text/css"});
this.editors['css'].setSize("100%", "calc( 100vh - 350px )");
// 其余html、js等标签的编辑器按相同逻辑存入editors对象

// 2. 绑定标签页显示事件（Bootstrap 5 写法，3版本把data-bs-toggle改为data-toggle即可）
document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tabTrigger => {
  tabTrigger.addEventListener('shown.bs.tab', function (e) {
    // 获取当前激活标签的ID
    const activeTabId = e.target.getAttribute('href').replace('#', '');
    // 对应编辑器存在则调用refresh重绘
    if (this.editors[activeTabId]) {
      this.editors[activeTabId].refresh();
      // 只需要首次刷新的话可以加判断标记，避免重复调用
    }
  })
})

方案2：懒加载初始化编辑器 #

无需页面加载时初始化所有编辑器，仅当用户第一次切换到对应标签时才初始化当前标签的CodeMirror实例，从根源避免不可见容器内的尺寸计算问题，同时还能减少初始化阶段的性能消耗。

this.editors = {}
// 绑定标签显示事件
document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tabTrigger => {
  tabTrigger.addEventListener('shown.bs.tab', function (e) {
    const activeTabId = e.target.getAttribute('href').replace('#', '');
    // 仅未初始化过的标签才执行初始化逻辑
    if (!this.editors[activeTabId]) {
      const code_element = document.getElementById(activeTabId);
      code_element.value = message[activeTabId];
      this.editors[activeTabId] = CodeMirror.fromTextArea(code_element, {
        lineNumbers: false, 
        mode: `text/${activeTabId}`
      });
      this.editors[activeTabId].setSize("100%", "calc( 100vh - 350px )");
    }
  })
})

// 主动初始化默认激活的第一个标签的编辑器
const defaultActiveTabId = document.querySelector('.tab-pane.active').id;
const defaultCodeEl = document.getElementById(defaultActiveTabId);
defaultCodeEl.value = message[defaultActiveTabId];
this.editors[defaultActiveTabId] = CodeMirror.fromTextArea(defaultCodeEl, {
  lineNumbers: false, 
  mode: `text/${defaultActiveTabId}`
});
this.editors[defaultActiveTabId].setSize("100%", "calc( 100vh - 350px )");

内容的提问来源于stack exchange，提问作者Darren Oakey