Package Exports

tiptap-extension-image-resize
tiptap-extension-image-resize/src/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tiptap-extension-image-resize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tiptap-extension-image-resize

Image extension for tiptap

Use this library without using @tiptap/extension-image

Support picture resize and rotation
Support to expand other functions

Instalation

npm i tiptap-extension-image-resize

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',
});