如何在MUI富文本编辑器中实现图片与文字同行显示

直接给编辑器根容器加flex会破坏文档流，导致回车无法正常换行——因为flex容器默认强制子元素单行排列，覆盖了编辑器原本的换行逻辑。正确的做法是单独给编辑器内的图片元素设置行内块样式，不改动根容器布局：

步骤1：给图片元素添加自定义样式 #

通过CSS模块或全局样式，针对编辑器中的img标签设置以下样式：

/* 示例：用CSS模块时的样式 */
.editorContent img {
  display: inline-block;
  vertical-align: middle; /* 让图片与文字垂直居中对齐 */
  max-width: 100%; /* 可选：防止图片撑破编辑器宽度 */
}

步骤2：将样式应用到编辑器内容区域 #

不要给根div加flex，而是把自定义样式类绑定到编辑器的内容区域（而非根容器），具体类名可参考MUIRichTextEditor的API文档（通常内容区域类名为content或editor）：

<MUIRichTextEditor
  label="Type something here..."
  classes={{
    content: cl.editorContent // 绑定自定义样式类
  }}
  defaultValue={content}
  onSave={save}
  onChange={onChange}
/>

原理说明 #

display: inline-block让图片既保留块级元素的宽高可控特性，又能和行内文字在同一行排列；vertical-align: middle解决图片与文字垂直对齐的视觉错位问题。这种方式不会改动编辑器的整体文档流，因此回车换行功能可以正常工作。

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