TinyMCE 4：如何让工具栏占满fixed_toolbar_container的宽度

嗨，我来帮你搞定TinyMCE工具栏占满容器宽度的问题！这里有几个实用的方法，你可以根据自己的场景选择：

方法1：直接用CSS覆盖默认样式 #

TinyMCE的工具栏默认带有最大宽度限制，直接写CSS就能快速解决：

/* 让主工具栏占满容器宽度 */
.tox-toolbar__primary {
  width: 100% !important;
  max-width: 100% !important;
}

/* 可选：让工具栏按钮组均匀分布填充宽度 */
.tox-toolbar__group {
  flex: 1;
  justify-content: center;
}

如果你的工具栏开启了粘性模式（toolbar_sticky: true），记得还要加上这一段：

.tox-toolbar__sticky {
  width: 100% !important;
  max-width: 100% !important;
}

方法2：通过编辑器初始化配置动态设置样式 #

如果担心CSS优先级问题，或者想在编辑器完全初始化后再调整样式，可以用setup函数监听初始化事件：

tinymce.init({
  selector: '#your-editor-id',
  // 你的其他配置项...
  setup: function(editor) {
    editor.on('init', function() {
      // 获取工具栏元素并设置宽度
      const toolbar = document.querySelector('.tox-toolbar__primary');
      if (toolbar) {
        toolbar.style.width = '100%';
        toolbar.style.maxWidth = '100%';
      }
    });
  }
});

方法3：调整工具栏布局模式适配宽容器 #

如果你的工具栏按钮较多导致自动换行，可以设置toolbar_mode: 'wrap'让工具栏自动换行，同时配合前面的CSS确保每行都占满宽度：

tinymce.init({
  selector: '#your-editor-id',
  toolbar_mode: 'wrap',
  // 其他配置...
});

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