如何修改Quill编辑器Bubble主题的响应式工具栏组排序？

要把粗体、斜体这类高频inline工具移到响应式工具栏的最后一组，你可以通过自定义工具栏DOM结构结合CSS媒体查询调整flex排序实现，具体步骤如下：

1. 自定义工具栏HTML结构 #

放弃Quill默认的工具栏配置数组，手动编写工具栏HTML，给不同工具组添加自定义类名，方便后续CSS定位：

<div id="toolbar" class="ql-toolbar ql-bubble">
  <!-- 标题、引用等工具组 -->
  <div class="ql-formats ql-group-secondary">
    <select class="ql-header"></select>
    <button class="ql-blockquote"></button>
    <button class="ql-code-block"></button>
  </div>
  <!-- 链接、图片等工具组 -->
  <div class="ql-formats ql-group-media">
    <button class="ql-link"></button>
    <button class="ql-image"></button>
  </div>
  <!-- 目标inline工具组（粗体、斜体、下划线） -->
  <div class="ql-formats ql-group-inline">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
  </div>
</div>

2. 初始化Quill时绑定自定义工具栏 #

初始化Quill时指定自定义的工具栏元素：

const quill = new Quill('#editor', {
  theme: 'bubble',
  modules: {
    toolbar: '#toolbar'
  }
});

3. 添加CSS媒体查询调整响应式排序 #

Bubble主题默认在屏幕宽度小于768px时切换为多列工具栏，我们针对这个断点，给inline工具组设置更高的order值，让它排在最后：

/* 匹配Quill Bubble主题的移动端断点 */
@media (max-width: 767px) {
  .ql-bubble .ql-toolbar {
    display: flex;
    flex-wrap: wrap;
  }
  /* 次要工具组排首位 */
  .ql-group-secondary {
    order: 1;
  }
  /* 媒体工具组排中间 */
  .ql-group-media {
    order: 2;
  }
  /* 高频inline工具组排最后 */
  .ql-group-inline {
    order: 3;
  }
  /* 可选：优化移动端工具组间距 */
  .ql-formats {
    margin-right: 12px;
    margin-bottom: 8px;
  }
}

额外优化：解决工具栏溢出问题 #

针对你提到的父容器高度不足导致工具栏溢出的问题，给编辑器容器添加基础样式：

#editor {
  min-height: 200px;
  overflow-y: auto;
}
@media (max-width: 767px) {
  .ql-bubble .ql-toolbar {
    overflow-x: hidden;
    overflow-y: visible;
  }
}

调整后，移动端下粗体、斜体这类高频工具会被放到工具栏最后一组，确保用户能优先访问，同时解决了溢出问题。

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