5分钟搞定Tiptap编辑器@提及功能：从零到实战完整指南

5分钟搞定Tiptap编辑器@提及功能：从零到实战完整指南

【免费下载链接】tiptapThe headless editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap

还在为编辑器中的@提及功能开发而头疼吗？从用户列表加载到实时搜索，再到样式自定义，整个流程涉及太多技术细节。今天，我将带你用最简单的方法，在5分钟内为Tiptap编辑器集成完整的提及功能，无需复杂配置，零基础也能快速上手。

为什么你需要Tiptap的提及功能

在现代协作编辑器中，@提及功能已经成为标配。无论是团队协作工具、社交媒体平台还是企业内部系统，让用户能够快速@同事或添加#标签，都能极大提升用户体验和工作效率。

Tiptap作为一款无头编辑器框架，其提及功能基于ProseMirror的Suggestion插件实现，具有极高的灵活性和可定制性。

三步完成基础@功能集成

第一步：环境准备与依赖安装

首先，你需要确保项目环境准备就绪。Tiptap支持Vue、React等多种前端框架，这里以Vue 3为例：

npm install @tiptap/core @tiptap/extension-mention @tiptap/vue-3

第二步：核心配置代码

创建编辑器实例并配置Mention扩展，这是整个功能的核心：

<template> <div v-if="editor"> <editor-content :editor="editor" /> </div> </template> <script> import Document from '@tiptap/extension-document' import Mention from '@tiptap/extension-mention' import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' import { Editor, EditorContent } from '@tiptap/vue-3' export default { components: { EditorContent }, data() { return { editor: null } }, mounted() { this.editor = new Editor({ extensions: [ Document, Paragraph, Text, Mention.configure({ HTMLAttributes: { class: 'mention' }, suggestion: { char: '@', items: ({ query }) => { // 模拟用户数据源 const users = [ { id: '1', label: '张三' }, { id: '2', label: '李四' }, { id: '3', label: '王五' } ] return users .filter(user => user.label.toLowerCase().includes(query.toLowerCase())) .slice(0, 5) }, } }) ], content: '<p>开始输入@触发提及功能...</p>' }) } } </script>

第三步：视觉样式优化

为了让提及标签看起来更专业，添加相应的CSS样式：

.mention { background-color: #e5f3ff; border-radius: 4px; padding: 0 4px; color: #1a73e8; font-weight: 500; cursor: pointer; } .mention:hover { background-color: #d1e7ff; }

进阶功能：同时支持@用户和#标签

在实际项目中，你可能需要同时支持多种类型的提及。Tiptap的suggestions选项让你能够轻松实现这一需求：

Mention.configure({ HTMLAttributes: { class: 'mention' }, suggestions: [ { char: '@', pluginKey: 'user-mention', items: ({ query }) => fetchUsers(query), command: ({ editor, range, props }) => { editor.chain() .focus() .insertContentAt(range, [ { type: 'mention', attrs: { id: props.id, label: props.label, mentionSuggestionChar: '@' } }, { type: 'text', text: ' ' } ]) .run() } }, { char: '#', pluginKey: 'tag-mention', items: ({ query }) => fetchTags(query), command: ({ editor, range, props }) => { // 标签提及的专用逻辑 editor.chain() .focus() .insertContentAt(range, [ { type: 'mention', attrs: { id: props.id, label: props.label, mentionSuggestionChar: '#' } }, { type: 'text', text: ' ' } ]) .run() } } ] })

企业级应用场景与性能优化

场景一：团队协作工具

在团队协作场景中，@提及功能可以让成员快速通知相关人员。结合demos/src/Nodes/Mention/Vue/suggestion.js中的自定义建议组件，你可以创建更加智能的用户推荐系统。

场景二：内容管理平台

对于内容管理系统，同时支持@用户和#标签能够极大丰富内容的表现形式。用户可以通过@提及相关人员，通过#标签分类内容。

性能优化技巧

1. 防抖处理：在用户输入时添加防抖，避免频繁请求：

items: debounce(({ query }) => { return fetchUsers(query) }, 300)

2. 结果缓存：对相同查询词的结果进行缓存，减少重复请求。

3. 虚拟滚动：当用户列表较长时，使用虚拟滚动技术优化渲染性能。

常见问题与解决方案

问题一：提及节点无法删除

解决方案：启用deleteTriggerWithBackspace选项：

Mention.configure({ deleteTriggerWithBackspace: true, // 其他配置... })

问题二：多触发字符冲突

确保为不同的触发类型使用不同的pluginKey：

suggestions: [ { char: '@', pluginKey: 'user-mention' }, { char: '#', pluginKey: 'tag-mention' } ]

问题三：样式不生效

检查CSS选择器是否正确，确保与HTMLAttributes中定义的class匹配。参考demos/src/Nodes/Mention/Vue/index.vue中的样式配置。

实战案例：多提及功能完整实现

查看demos/src/Examples/MultiMention/Vue/index.vue获取完整的多提及功能实现代码，该示例展示了：

• 同时支持@用户和#标签
• 智能建议列表
• 响应式样式设计
• 完整的用户交互流程

总结与下一步

通过本文的介绍，你已经掌握了Tiptap编辑器提及功能的核心用法。从基础集成到高级定制，从性能优化到问题解决，你现在应该能够：

• 在5分钟内为项目添加@提及功能
• 根据需求扩展为多类型提及系统
• 优化用户体验和性能表现

Tiptap的提及功能通过灵活的配置选项和可扩展的插件系统，为你提供了企业级的解决方案。无论是简单的用户提及，还是复杂的多类型标签系统，都能轻松应对。

下一步，你可以探索Tiptap的其他扩展功能，如表格、代码块、图片处理等，构建更加完善的富文本编辑体验。

【免费下载链接】tiptapThe headless editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap