tiptap-extension-image

Install

npm install tiptap-extension-image -S

Usage

import Image from "tiptap-extension-image";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [
    StarterKit,
    Image.configure({ inline: true, allowBase64: true })
  ],
});

editor
  .chain()
  .focus()
  .setImage({
    src: dataString,
  })
  .run();

Supports the presence of the style attribute of the inserted img as baseStyle.

const html = `<img style="width: 100%; display: inline-block" src="/88f84b8.png"/>`

editor
  .chain()
  .focus()
  .insertContent(html, {
    parseOptions: {
      preserveWhitespace: false,
    },
  })
  .run();
// baseStyle: "width: 100%; display: inline-block"

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