tiptap-extension-link
A link extension that supports fully customizable HTML Attributes, not the uniform configure HTMLAttributes option.
Install
npm install tiptap-extension-link -SUsage
Additional HTMLAttributes parameter added to setLink
editor
.chain()
.focus()
.setLink({
href: "",
HTMLAttributes: {
class: "text_link",
"data-id": appID,
"data-nickname": nickname,
"data-path": path,
"data-type": "text",
"data-servicetype": "",
target: "",
},
});Creates a link mark with the specified HTMLAttributes.
let { state } = editor;
let mark = state.schema.text("This is the link text", [
state.schema.marks.link.create({
href: "",
HTMLAttributes: {
class: "text_link",
"data-id": appID,
"data-nickname": nickname,
"data-path": path,
"data-type": "text",
"data-servicetype": "",
target: "",
},
}),
]);
const tr = state.tr.insert(state.selection.from, mark);
editor.view.dispatch(tr);Options
@tiptap/extension-link configuration option is still supported.
import Link from "tiptap-extension-link";
const editor = new Editor({
element: document.querySelector(".editor"),
extensions: [
StarterKit,
Link.configure({ openOnClick: false, HTMLAttributes: { rel: "" } }),
],
});Relations
@tiptap/extension-link: https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-link
tiptap-extension-image-link: https://github.com/KID-1912/tiptap-extension-image-link
tiptap-appmsg-editor: https://github.com/KID-1912/tiptap-appmsg-editor