如何调整TinyMCE 4.x版本中属性弹窗的尺寸？

以下三个方案按优先级排序，可根据你的实际场景选择：

方法1：初始化时配置弹窗尺寸（官方推荐） #

直接在TinyMCE初始化参数中加入对应配置，兼容性最高，不需要额外修改样式或监听事件：

tinymce.init({
  selector: 'textarea', // 替换为你实际绑定的编辑器选择器
  // 其他原有配置项...
  // 全局弹窗默认宽高，所有弹窗统一生效
  width: 800,
  height: 600,
  // 仅针对表格相关弹窗配置，不会影响其他功能弹窗
  table_dialog_width: 700,
  table_dialog_height: 500
});

• table_dialog_width、table_dialog_height是表格插件专属配置，对表格属性、单元格属性、行属性等所有表格相关弹窗生效，刚好匹配你需要调整的场景。

方法2：CSS强制覆盖动态样式 #

如果配置项不生效，可通过高优先级CSS规则覆盖JS动态写入的行内样式，加!important即可生效：

/* 适配所有TinyMCE弹窗 */
.mce-window {
  width: 700px !important;
  min-width: 650px !important;
  height: auto !important;
}
/* 仅适配表格属性弹窗，不影响其他功能弹窗 */
.mce-window[aria-label="Table Properties"],
.mce-window[aria-label="表格属性"] {
  width: 750px !important;
  min-width: 700px !important;
}
/* 修复标签文字重叠问题，给标签设置最小宽度 */
.mce-window .mce-label {
  min-width: 120px !important;
  margin-right: 10px !important;
}

• 可根据你实际DOM的类名、aria属性微调选择器，适配你当前的TinyMCE小版本。

方法3：监听弹窗事件动态修改 #

如果需要更灵活的控制逻辑，比如根据弹窗内容动态调整尺寸，可以监听TinyMCE的OpenWindow事件，弹窗渲染完成后直接修改DOM属性：

tinymce.init({
  selector: 'textarea',
  // 其他原有配置项...
  setup: function(editor) {
    editor.on('OpenWindow', function(e) {
      // 加短延迟保证弹窗DOM完全渲染
      setTimeout(function() {
        // 判断当前打开的是否为表格属性弹窗
        if (e.title === 'Table Properties' || e.title === '表格属性') {
          const targetWin = document.querySelector('.mce-window[aria-label="' + e.title + '"]');
          if (targetWin) {
            targetWin.style.width = '750px';
            targetWin.style.minWidth = '700px';
            // 强制重绘弹窗内容布局，修复排版错乱
            targetWin.querySelector('.mce-window-body').style.width = '100%';
          }
        }
      }, 10);
    });
  }
});

• 延迟时间可根据你页面实际渲染速度调整，一般10-50ms即可。

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