MDXEditor 自定义图片插入对话框的实现与优化

引言

在富文本编辑器开发中，图片插入功能是一个常见但实现起来较为复杂的需求。MDXEditor 作为一款强大的 Markdown 编辑器，提供了灵活的插件系统，允许开发者自定义各种功能。本文将详细介绍如何在 MDXEditor 中实现一个功能完善的图片插入对话框，包括图片上传和外部链接两种方式。

核心组件设计

状态管理

图片插入对话框需要管理多个状态：

• 对话框的打开/关闭状态
• 图片URL和alt文本
• 上传加载状态

const [openImageDialog, seOpenImageDialog] = useState(false);
const [imgUrl, setImgUrl] = useState({
    src: "",
    alt: ""
});
const [loading, setLoading] = useState(false);

对话框结构

对话框采用分层设计，主要包含三个部分：

1. 图片上传区域（使用Uploadthing服务）
2. 手动输入区域（URL和标题）
3. 操作按钮区域（取消和保存）

图片上传功能实现

上传组件集成

使用UploadDropzone组件实现拖拽上传功能，关键配置包括：

• 自定义按钮样式
• 上传完成和失败的回调处理
• 粘贴板支持

<UploadDropzone
    appearance={{
        button: "上传按钮样式",
        allowedContent: "提示文本样式"
    }}
    endpoint="imageUploader"
    onClientUploadComplete={(res) => {
        // 上传完成处理
    }}
    onUploadError={(error) => {
        // 错误处理
    }}
/>

上传后处理

上传完成后，通过MDXEditor提供的insertImage方法将图片插入编辑器：

insertImage({
    src: file.url,
    altText: file.name,
    title: file.name
});

手动输入功能实现

表单控制

提供两个输入框分别用于：

• 图片链接（必填）
• 图片标题/alt文本（必填）

<Input
    value={imgUrl.src}
    placeholder='图片链接'
    onChange={(e) => setImgUrl({ ...imgUrl, src: e.target.value })}
/>

保存验证

保存前进行必要验证：

• 链接和标题不能为空
• 显示加载状态
• 错误处理

if (imgUrl.alt.trim().length === 0 || imgUrl.src.trim().length === 0) {
    return;
}
setLoading(true);
await insertImage({
    src: imgUrl.src,
    altText: imgUrl.alt,
    title: imgUrl.alt
});

集成到MDXEditor

工具栏配置

将自定义组件添加到MDXEditor的工具栏中：

toolbarContents: () => (
    <>
        {/* 其他工具栏组件 */}
        <AddImage />
    </>
);

图片插件配置

禁用默认的图片设置按钮，使用自定义实现：

imagePlugin({
    disableImageSettingsButton: true,
}),

用户体验优化

1. 视觉反馈：上传过程中显示加载动画
2. 错误处理：上传失败时显示友好的错误提示
3. 表单验证：必填字段未填写时禁用保存按钮
4. 操作流程：上传完成后自动关闭对话框

总结

通过自定义图片插入对话框，我们为MDXEditor实现了更符合实际业务需求的图片管理功能。这种实现方式不仅提供了更好的用户体验，还展示了MDXEditor强大的可扩展性。开发者可以根据具体需求，进一步扩展此功能，例如添加图片预览、尺寸调整等特性。

这种自定义组件的开发模式可以应用于MDXEditor的其他功能扩展，为开发者提供了极大的灵活性，是构建专业级内容编辑工具的有效方法。