@tiptap/extension-image

Insert Image

This feature allows users to insert an image into the editor. The code sample demonstrates how to initialize the editor with the Image extension and insert an image by specifying its source URL.

import { Image } from '@tiptap/extension-image';
import { Editor } from '@tiptap/core';

const editor = new Editor({
  extensions: [
    Image,
  ],
});

editor.chain().focus().setImage({ src: 'https://example.com/image.jpg' }).run();

Resize Image

This feature enables users to resize an image by setting its width and height. The code sample shows how to set the dimensions of an image within the editor.

editor.chain().focus().setNode('image', { src: 'https://example.com/image.jpg', width: 300, height: 200 }).run();

Align Image

This feature allows users to align an image within the text. The code sample demonstrates how to align an image to the right by applying a CSS style.

editor.chain().focus().setNode('image', { src: 'https://example.com/image.jpg', style: 'float: right;' }).run();