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: {
// …
},
});