CKEditor初始隐藏时autogrow插件将高度设为0的问题咨询

问题背景 #

将XPages应用升级至12.0.2版本后，平台附带的CKEditor从4.5.6.1升级到4.18。发现当CKEditor初始处于隐藏状态（如Bootstrap隐藏标签页中）时，高度会被设为0：

• 禁用autoGrow_onStartup会导致正常场景下无法自动增长高度，不符合需求
• 排查发现autogrow插件在隐藏状态下无法检测内容高度，变量被设为"auto"，转换为NaN后，新版本通过height = convertCssUnitToPx( height );将其转为0（旧版本会忽略NaN）

更优解决方案 #

1. 监听标签页切换事件，触发CKEditor重新计算高度 #

利用Bootstrap标签页的shown.bs.tab事件，在标签页激活后触发CKEditor的autogrow检查，无需修改插件代码，不影响正常场景的自动增长：

// 监听Bootstrap标签页切换完成事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 获取激活的标签页容器
  var targetTab = $(e.target).attr('href');
  // 找到标签页内的CKEditor实例
  var $editorTextarea = $(targetTab).find('.ckeditor');
  if ($editorTextarea.length > 0) {
    var editorInstance = CKEDITOR.instances[$editorTextarea.attr('id')];
    if (editorInstance && editorInstance.plugins.autogrow) {
      // 触发autogrow插件重新检查内容高度
      editorInstance.plugins.autogrow.check();
    }
  }
});

2. 初始化前临时显示容器 #

如果CKEditor容器初始处于隐藏状态，初始化前先临时显示容器，让CKEditor能正确计算初始高度，之后再恢复隐藏状态：

var $editorContainer = $('.hidden-tab .editor-container');
// 临时显示容器
$editorContainer.css('display', 'block');
// 初始化CKEditor
CKEDITOR.replace($editorContainer.find('textarea').attr('id'));
// 恢复隐藏状态
$editorContainer.css('display', 'none');

3. 轻量修改autogrow插件处理NaN高度 #

如果不想依赖页面事件，可对autogrow插件做最小修改：在计算高度的逻辑中，判断高度为NaN时使用autoGrow_minHeight的默认值。找到autogrow插件的check函数，添加如下判断：

// 在原有计算newHeight的逻辑后添加
if (isNaN(newHeight)) {
  newHeight = editor.config.autoGrow_minHeight || 200; // 200为CKEditor默认minHeight
}
// 执行resize
editor.resize(null, newHeight);

方案对比 #

• 方案1最优：无需修改插件，适配可复用组件，仅在标签页激活时触发计算，不影响正常场景的自动增长逻辑
• 方案2适合静态隐藏的容器初始化场景，但需确保初始化时机正确
• 方案3需要修改平台自带插件，需考虑后续版本升级的兼容性

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