如何快速实现 Quill 编辑器的 @提及功能？超实用插件全指南 🚀
项目地址: https://gitcode.com/gh_mirrors/qu/quill-mention Quill Mention 是一个专为 Quill 富文本编辑器设计的强大模块，能够轻松实现 @mentions 和 #hashtags 功能。无论是社交平台评论区、企业协作工具还是在线文档系统，这款插件都能帮你快速集成社交化编辑体验，提升用户互动效率。
✨ 为什么选择 Quill Mention？
作为基于 TypeScript 开发的开源插件，Quill Mention 具备以下核心优势：
- 异步数据检索：支持实时搜索后端用户数据
- 高度自定义：从触发字符到渲染样式完全可控
- 轻量高效：遵循 MIT 协议，无冗余依赖
- 完善生态：无缝对接 Quill 编辑器的其他扩展功能
项目源码结构清晰，核心功能实现位于 src/mention.ts，样式定义在 src/quill.mention.css，便于二次开发和维护。
📸 功能演示
下面的动图展示了 Quill Mention 的实际效果：在编辑器中输入 @ 符号后，会实时弹出用户选择列表，支持键盘导航和鼠标选择，极大提升内容创作效率。
🚀 快速开始指南
1️⃣ 环境准备
确保已安装 Node.js 和 npm，然后通过以下命令克隆项目：
git clone https://gitcode.com/gh_mirrors/qu/quill-mention
cd quill-mention
2️⃣ 两种安装方式
方式一：npm 安装（推荐）
npm install quill-mention --save
方式二：手动引入
下载项目后，直接引入编译好的文件：
<link rel="stylesheet" href="dist/quill.mention.min.css">
<script src="dist/quill.mention.min.js"></script>
3️⃣ 简单配置示例
自动注册模式（适合快速集成）
import 'quill-mention/autoregister';
const quill = new Quill('#editor', {
modules: {
mention: {
mentionDenotationChars: ['@', '#'], // 触发字符
source: (searchTerm, renderList) => {
// 模拟异步请求用户数据
const users = [
{ id: 1, value: '张三' },
{ id: 2, value: '李四' }
];
renderList(users.filter(user =>
user.value.includes(searchTerm)
));
}
}
}
});
手动注册模式（适合高级定制）
import { Quill } from 'quill';
import { Mention, MentionBlot } from 'quill-mention';
// 注册自定义模块
Quill.register({
'blots/mention': MentionBlot,
'modules/mention': Mention,
});
// 详细配置
const quill = new Quill('#editor', {
modules: {
mention: {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
minChars: 1, // 最小触发字符数
maxItems: 10, // 最大显示结果数
loadingMessage: '加载中...',
// 更多配置项...
}
}
});
💡 实用场景与最佳实践
🌟 社交平台应用
在评论区或动态发布框中集成 @ 提及功能，用户输入时自动提示好友列表，点击即可完成@操作，提升社交互动效率。
👥 团队协作工具
在在线文档或任务管理系统中，使用 @ 提及团队成员可自动发送通知，结合 src/utils/index.ts 中的工具函数，可实现更复杂的权限控制逻辑。
📊 内容管理系统
通过 # 标签功能，可快速实现文章分类和内容关联，配合自定义渲染函数，能打造独特的标签展示样式。
🛠️ 生态整合方案
Quill Mention 可与以下工具完美配合，构建全功能编辑解决方案：
- Quill Table Module：添加表格编辑能力
- Quill Uploader：支持图片/文件上传
- Quill Delta：实现文档版本控制和协作编辑
项目提供了两个完整示例：
- 自动注册示例：example/autoregister/
- 手动引入示例：example/manual-import/
📝 总结
Quill Mention 作为 Quill 编辑器的核心扩展，以其轻量化设计和强大功能，成为实现@提及和话题标签功能的首选方案。无论是新手开发者还是资深工程师，都能通过简单配置快速集成，或根据业务需求深度定制。
通过合理利用 src/blots/mention.ts 中的自定义 blot 实现，甚至可以打造出如微博@用户、GitHub 引用issue等特色交互效果。立即尝试，让你的富文本编辑器焕发社交化活力！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
