tiptap 的 Link 扩展粘贴或者输入的内容的 a 标签的href 只能是#开头的
要实现这个功能,你可以使用 tiptap 的 extension API 来自定义一个 Link 扩展。首先,你需要创建一个新的扩展类,然后覆盖默认的 Link 扩展中的 openLink 方法。
以下是一个示例代码,演示了如何实现只允许 # 开头的链接:
import { Link } from 'tiptap-extensions'
export default class CustomLink extends Link {
openLink() {
const { href } = this.attrs
if (href.startsWith('#')) {
// 打开链接
window.location.hash = href
} else {
// 链接不符合要求,这里可以做一些提示或者其他处理
console.warn('链接不符合要求')
}
}
}
然后,你可以在你的 tiptap 编辑器中使用这个自定义的 Link 扩展:
import { Editor } from 'tiptap'
import CustomLink from './CustomLink'
const editor = new Editor({
extensions: [
CustomLink,
],
})
现在,当用户粘贴或者输入一个链接时,如果链接的 href 属性不是以 # 开头,tiptap 将会在控制台输出警告信息,而不会创建一个有效的链接。如果链接的 href 属性以 # 开头,tiptap 将会打开这个链接。
请注意,这只是一个示例代码,你可以根据你的需求进一步修改和定制
原文地址: http://www.cveoy.top/t/topic/hXHR 著作权归作者所有。请勿转载和采集!