AiEditor 提及功能的数据结构解析

AiEditor 提及功能的数据结构解析

在富文本编辑器 AiEditor 中，提及功能是一个常见的社交化交互组件，它允许用户在编辑内容时快速@其他用户。本文将从技术实现角度深入分析 AiEditor 提及功能的数据结构要求。

数据结构要求

AiEditor 的提及功能对返回数据有明确的结构要求。虽然文档中说明可以返回包含 label 和 id 字段的对象，但实际实现中还额外需要 name 字段才能确保功能完整显示。这种设计考虑到了不同场景下的显示需求。

字段解析

1. id 字段：作为用户的唯一标识符，用于后台数据关联和存储
2. label 字段：用于在提及下拉列表中显示的文本
3. name 字段：用于在编辑器中实际显示的文本内容

最佳实践示例

const mentionData = [
  {
    id: 1001,
    label: '张三 (技术总监)',
    name: '@张三'
  },
  {
    id: 1002,
    label: '李四 (产品经理)',
    name: '@李四'
  }
];

实现原理

这种三字段设计实现了显示与存储的分离：

• label 可以包含更多辅助信息（如职位）
• name 控制编辑器中实际显示的格式
• id 确保数据关联的准确性

开发者在使用时应当确保三个字段都正确提供，以获得最佳的提及功能体验。