tiptap 引用

老实说，提及节点非常棒。它支持 @提及 功能，例如用于@用户，并且对渲染提供了完全的控制。

几乎可以自定义一切。你可以传递一个自定义组件进行渲染。所有示例都使用 .filter() 搜索项目，但请随意发送异步查询到 API 或在项目中添加更高级的库，如 fuse.js 。

安装

npm install @tiptap/extension-mention

依赖项

为了正确放置提示框，我们在所有示例中使用了 tippy.js 。你可以自己选择库，但如果愿意，只需安装我们使用的即可：

npm install tippy.js

从 2.0.0-beta.193 开始，我们将 @tiptap/suggestion 标记为 peer dependency。这意味着你需要手动安装它。

npm install @tiptap/suggestion

配置

HTMLAttributes

自定义应添加到渲染 HTML 标签上的自定义 HTML 属性。

Mention.configure({
  HTMLAttributes: {
    class: "my-custom-class",
  },
});

renderText

定义如何渲染提及文本。

Mention.configure({
  renderText({ options, node }) {
    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
  },
});

renderHTML

定义如何渲染提及 HTML 元素，这对于想要渲染非 span（例如 a ）元素时很有用。

Mention.configure({
  renderHTML({ options, node }) {
    return [
      "a",
      mergeAttributes({ href: "/profile/1" }, options.HTMLAttributes),
      `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,
    ];
  },
});

deleteTriggerWithBackspace

启用或禁用在删除提及节点时是否同时删除建议字符。默认为 false 。

Mention.configure({
  deleteTriggerWithBackspace: true,
});

suggestion

了解更多

Mention.configure({
  suggestion: {
    // …
  },
});

源代码

packages/extension-mention/

使用方法

查看Tiptap 预览