在实际项目里富文本编辑器往往需要支持多种业务场景：使用者提及、文件引用、图片模块等。传统的编辑器组件往往只提供基础文字输入功能，无法满足“结构化信息嵌入+可交互+可 ”的需求。下面通过 ReactQuill 的 Blot 机制。演示如何从零实现自定义 @提及和图片信息块，让你拥有一个可插拔、可交互的富文本组件程序。

使用者痛点

• **需求频繁变化**：业务侧经常要求新增“@使用者”或“图片引用”等功能。但原生编辑器没有对应 API，导致手动改造成本高。
• **结构化数据难以持久化**：普通文本插入后只能通过字符串匹配来恢复，易失真；缺少统一的 Delta 存储方式。
• **交互不灵活**：例如点击图片弹出预览。需要自行监听事件并处理 DOM，代码散乱且不易维护。
• **团队协作障碍**：同一套组件不易复用。不同前端工程师对实现细节理解不同，导致出现兼容性问题。

功能一这方面，从零实现 @提及模块

1️⃣ 效果说明

@ 提及是协作文档、评论区最常见的功能。当输入 @ 后弹窗联想使用者，并在编辑器内以蓝底高亮显示使用者名。说起来，后台需要保存结构化数据方便后续业务处理。

• @ + 关键词 ➜ 弹窗联想使用者
• 插入后显示蓝底高亮 + 不可编辑 + 可提取结构化数据
• 支持 Delta 格式存储 / 还原

插入结果示例这方面，

@lin

2️⃣ 功能目标拆解

3️⃣ 实现细节

. 定义 Mention Blot 类

import Quill from 'quill';怎么说呢，const Inline = Quill.import;class MentionBlot extends Inline {
static blotName = 'mention';
static className = 'mention-blot';static tagName = 'span';其实，static create {
const node = super.create;其实，node.setAttribute;node.setAttribute;node.innerText = `@${data.name}`;return node，}
static value {
return {
id这方面。node.getAttribute || '',name: node.innerText.replace
};怎么说呢，}
}
Quill.register;

. 在 React 中插入 mention

import React,{ useRef } from 'react';说起来，import ReactQuill from 'react-quill';怎么说呢，import 'react-quill/dist/quill.snow.css';export const QuillEditor = => {
const quillRef = useRef;const insertMention = => {
const editor = quillRef.current?.getEditor，const range = editor?.getSelection;if {
editor.insertEmbed(range.index。'mention',{
从id来看，'u1',name: 'lin'
});// 将光标移动到刚才插入位置之后
editor.setSelection;}
}，话说回来，return (
<>
插入 @lin

);}，

. 提取结构化数据

const delta = editor.getContents;按理说，const mentions = delta.ops
.filter
.map;//

. 从 JSON 恢复回富文本

const delta = {
再看ops，};按理说，editor.setContents;

功能二的观点是，在富文本框内放置图片信息。点击弹出 Modal预览

1️⃣ 达到效果概述

\end{document}