如何在MUIRichTextEditor（mui-rte）中实现图文同行布局

云原生阿岚

2026-8-10

实现MUIRichTextEditor中图片与文字同行显示

方法一：通过CSS样式覆盖

MUIRichTextEditor默认插入的图片是块级元素（display: block），只需修改其样式为行内块元素即可实现图文同行：

定义自定义样式类：

/* 自定义样式文件 */
.inline-image img {
    display: inline-block !important;
    vertical-align: middle; /* 可选，让文字与图片垂直居中对齐 */
    max-height: 1em; /* 可选，限制图片高度匹配文字行高 */
}

将样式类应用到编辑器组件：

import MUIRichTextEditor from "mui-rte";
import "./your-custom-styles.css"; // 引入自定义样式文件

<MUIRichTextEditor
    label="Type something here..."
    classes={{ ...cl, editor: "inline-image" }} // 将样式类绑定到编辑器容器
    defaultValue={content}
/>

方法二：自定义图片插入逻辑

如果需要更灵活的控制，可以自定义工具栏的图片插入命令，直接插入行内样式的图片：

配置自定义工具栏及插入逻辑：

import MUIRichTextEditor from "mui-rte";
import ImageIcon from "@mui/icons-material/Image";

const customToolbar = [
    "bold", "italic", "underline",
    {
        name: "inline-image",
        icon: <ImageIcon />,
        onClick: (editor) => {
            const imageUrl = prompt("请输入图片URL：");
            if (imageUrl) {
                editor.insertInline({
                    type: "image",
                    url: imageUrl,
                    attrs: {
                        style: "display: inline-block; vertical-align: middle; max-height: 1em;"
                    }
                });
            }
            return editor;
        }
    }
];

<MUIRichTextEditor
    label="Type something here..."
    classes={cl}
    defaultValue={content}
    toolbar={customToolbar} // 使用自定义工具栏
/>