Bootstrap模态框内Summernote编辑器输入无显示问题求助

我之前在项目里用Summernote结合Bootstrap模态框时也碰到过一模一样的问题！核心原因是模态框默认处于隐藏状态，Summernote在隐藏元素上初始化时，没法正确计算编辑器的可视区域尺寸，导致输入的内容没法实时渲染到正确位置——而窗口调整大小会触发Summernote的布局重新计算，所以内容才会突然显示出来。

下面是两种有效的解决方案：

方案一：在模态框显示后初始化/更新Summernote #

利用Bootstrap模态框的shown.bs.modal事件（这个事件会在模态框完全显示后触发），在这里初始化Summernote或者强制更新它的布局：

// 监听模态框显示完成事件
$('#TCModal').on('shown.bs.modal', function() {
  const $summernote = $('#summernoteTermsAndCondition');
  
  // 避免重复初始化编辑器
  if (!$summernote.hasClass('note-editor')) {
    $summernote.summernote({
      placeholder: '',
      height: 200,
      popover: {
        air: [
          ['color', ['color']],
          ['font', ['bold', 'underline', 'clear']]
        ]
      }
    });
  } else {
    // 如果已经初始化，强制更新布局
    $summernote.summernote('layout', 'update');
  }
});

方案二：调整模态框的初始化方式 #

如果你的模态框是动态生成的，确保在模态框的DOM元素完全渲染到页面后，再初始化Summernote。比如可以把初始化代码放在模态框DOM插入后的回调里：

// 假设模态框是动态插入到页面的
$('#TCModal').appendTo('body');
// 插入后立即初始化编辑器
$('#summernoteTermsAndCondition').summernote({
  placeholder: '',
  height: 200,
  popover: {
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']]
    ]
  }
});

额外注意事项 #

• 不要在模态框的init.bs.modal事件里初始化，这个事件是在模态框开始显示前触发的，此时元素还是隐藏状态，问题依旧存在。
• 如果需要保留之前输入的内容，可以在模态框隐藏时保存编辑器内容，显示时再回填：

  let savedContent = '';
  $('#TCModal').on('hidden.bs.modal', function() {
    savedContent = $('#summernoteTermsAndCondition').summernote('code');
  });
  
  $('#TCModal').on('shown.bs.modal', function() {
    const $summernote = $('#summernoteTermsAndCondition');
    if (!$summernote.hasClass('note-editor')) {
      $summernote.summernote({
        // 配置项...
      });
    }
    // 回填保存的内容
    $summernote.summernote('code', savedContent);
  });
  

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