React Jodit编辑器工具栏多行显示问题求助

工具栏出现多行显示，一般是容器宽度不足或编辑器默认布局配置导致的，试试以下几种解决方案：

• 调整外层容器宽度限制
  你当前的外层div使用了sm:max-w-screen这类Tailwind宽度类，可能在部分屏幕尺寸下限制了编辑器的可用宽度。可以尝试简化容器的宽度配置，给编辑器足够的横向空间：

  <div className="mx-auto">
    <JoditEditor
      value={this.content}
      tabIndex={1}
      onChange={value => this.content = value}
    />
  </div>
  

• 配置编辑器工具栏参数
  通过config属性自定义工具栏的行为和布局，比如缩小按钮尺寸、固定工具栏顶部，或者精简按钮分组：

  <JoditEditor
    value={this.content}
    tabIndex={1}
    onChange={value => this.content = value}
    config={{
      toolbarSticky: true, // 工具栏固定在顶部，避免随内容换行
      toolbarButtonSize: 'small', // 缩小按钮占用空间
      // 自定义工具栏按钮列表，按需取舍并合理分组
      toolbar: [
        'bold', 'italic', 'underline', '|',
        'ul', 'ol', '|',
        'link', 'image', '|',
        'align', 'undo', 'redo'
      ]
    }}
  />
  

• 自定义CSS强制单行显示
  如果前两种方法无效，可以通过CSS强制工具栏容器不换行，超出部分横向滚动：

  .jodit-toolbar__box {
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }
  

  将这段样式添加到你的全局样式文件中，或者通过组件的样式引入方式加载。

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