tiptap-extension-image-link

Install

npm install tiptap-extension-image-link -S

Usage

Insert an image link with the setImageLink command.

editor
  .chain()
  .focus()
  .setImageLink({
    href: "This is the link url",
    src: "This is the image url",
    HTMLAttributes: {
      class: "image_link",
      "data-nickname": Name,
      "data-appid": AppID,
      "data-path": Path,
      "data-type": "image",
      "data-servicetype": "",
      target: "",
    },
  })
  .enter()
  .run();

Options

You can configure common image link HTML attributes via the HTMLAttributes options

import ImageLink from "tiptap-extension-image-link";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [
    StarterKit,
    ImageLink.configure({
      HTMLAttributes: {
        class: "image-link",
      },
    }),
  ],
});

Relations

@tiptap/extension-link: https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-link

tiptap-extension-link: https://github.com/KID-1912/tiptap-extension-link

tiptap-appmsg-editor: https://github.com/KID-1912/tiptap-appmsg-editor