tiptap-extension-image-freely

Image extension for tiptap

Use this library without using @tiptap/extension-image

中文readme

• Support picture resize and rotation
• When the image fails to load, it can be processed freely, such as displaying a default image
• Support to expand other functions

Instalation

npm i tiptap-extension-image-freely -S

Usage

Add it as any extension in useEditor()

import Image from 'tiptap-extension-image-freely'

  extensions: {
    Image.configure({
      inline: false,
      onExtraCreated: (eleExtra: HTMLElement, imgRef: HTMLImageElement) => {
        eleExtra.innerHTML = 'something else'
      },
      onError: (eleExtra: HTMLElement) => {
        eleExtra.innerHTML = '<errorIcon />'
      }
    }),

Image Configuration

export interface ImageOptions {
  // same as @tiptap/extension-image
  inline: boolean
  allowBase64?: boolean
  HTMLAttributes?: Record<string, any>
  // Is support resize, default true
  resize?: boolean
  // Resize icon, the default is a small black square
  resizeIcon?: any
  // Is support rotate, default true
  rotate?: boolean
  // Rotate icon
  rotateIcon?: any
  /**
   * expand other functions
   * @param {HTMLElement} eleExtra - HTMLDivElement
   * @param {HTMLImageElement} imgRef - Reference of image
   */
  onExtraCreated?: (eleExtra: HTMLElement, imgRef: HTMLImageElement) => void
  /**
   * Callback for image loading failure
   * @param {HTMLElement} eleExtra - HTMLDivElement
   */
  onError?: (eleExtra: HTMLElement) => void
}

Commands

editor.commands.setImage({ 
  src: 'https://xxxx/xx.png', 
  alt: 'alt',
  title: 'title',
  width: '400px',
  rotate: '-180'
})