KID-1912/tiptap-extension-iframe

A tiptap extension that inserts custom iframe.

tiptap-extension-iframe

A tiptap extension that inserts custom iframe.

---

Install

npm install tiptap-extension-iframe -S

Usage

import Iframe from "tiptap-extension-iframe";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [StarterKit, Iframe],
});

editor
  .chain()
  .focus()
  .setParagraph()
  .setIframe({
    src: `http://v.qq.com/txp/iframe/player.html?vid=${videoId}`,
    HTMLAttributes: {
      class: "video_iframe",
      style: `height: 325px;border-radius: 4px;pointer-events: none;`,
    },
  })
  .run();

Options

You can configure common iframe HTML attributes via the HTMLAttributes options

  extensions: [
    StarterKit,
    Iframe.configure({
      HTMLAttributes: { frameborder: 0 }, // default HTMLAttributes
    }),
  ],

Relations

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

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