SAPUI5升级至1.120.12后TinyMCE表格列调整大小功能失效

问题现象 #

升级SAPUI5至1.120.12后，TinyMCE的表格列调整大小功能完全失效。该功能在SAPUI5 1.115.1版本中可正常使用，从1.116版本起出现异常。当前使用的TinyMCE初始化配置如下：

window.tinymce.init({
        selector: '#mainApp---test--myContainer',
        inline: true,
        table_resize_bars: true,
        plugins: [ "table"],
});

可能原因分析 #

• SAPUI5 1.116+版本对DOM元素的样式隔离、事件处理机制做了调整，导致TinyMCE的表格resize事件被拦截，或resize手柄的样式被全局样式覆盖
• TinyMCE与新版本SAPUI5存在CSS样式冲突，比如表格元素的resize属性被SAPUI5的默认样式重置
• SAPUI5的内容安全策略（CSP）或沙箱机制限制了TinyMCE的脚本操作权限

修复方案尝试 #

1. 强制修复resize手柄样式
   在自定义CSS文件中添加以下规则，确保TinyMCE表格的resize手柄能正常显示并触发事件：

   .mce-table-resize-handle {
       display: block !important;
       position: absolute !important;
       width: 5px !important;
       height: 100% !important;
       right: 0 !important;
       top: 0 !important;
       cursor: col-resize !important;
       background-color: transparent !important;
       z-index: 10000 !important;
   }
   .mce-table-resizing {
       table-layout: fixed !important;
   }
   

2. 延迟TinyMCE初始化时机
   确保SAPUI5控件完全渲染后再初始化TinyMCE，可在SAPUI5控制器的afterRendering钩子中执行初始化代码：

   // SAPUI5控制器示例代码
   onAfterRendering: function() {
       window.tinymce.init({
           selector: '#mainApp---test--myContainer',
           inline: true,
           table_resize_bars: true,
           plugins: ["table"],
           setup: function(editor) {
               editor.on('init', function() {
                   editor.dom.addClass(editor.getBody(), 'mce-table-resize-enabled');
               });
           }
       });
   }
   

3. 检查TinyMCE版本兼容性
   确认当前使用的TinyMCE版本是否适配SAPUI5 1.116+，尝试升级TinyMCE至最新稳定版，保留table_resize_bars: true配置。

4. 临时禁用样式隔离（谨慎操作）
   若问题由Shadow DOM导致，可尝试为目标容器关闭Shadow DOM支持（部分SAPUI5控件支持此配置），但需注意可能引发的全局样式污染问题。

验证步骤 #

• 应用修复后刷新测试页面
• 插入表格并拖动列边缘，检查resize功能是否恢复
• 查看浏览器控制台报错信息，辅助定位剩余问题

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