@tiptap/extension-image

What is @tiptap/extension-image?

@tiptap/extension-image is an extension for the Tiptap editor that allows users to easily add and manipulate images within their rich text content. It provides a range of functionalities to insert, resize, and align images, making it a versatile tool for enhancing text with visual content.

What are @tiptap/extension-image's main functionalities?

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();

Other packages similar to @tiptap/extension-image

quill-image-resize-module

quill-image-resize-module is an extension for the Quill editor that provides image resizing capabilities. It allows users to click and drag to resize images within the editor. Compared to @tiptap/extension-image, it focuses specifically on resizing functionality and is designed for use with the Quill editor.

draft-js-image-plugin

draft-js-image-plugin is a plugin for the Draft.js editor that adds image support. It allows users to insert and align images within their content. While it offers similar functionalities to @tiptap/extension-image, it is tailored for the Draft.js ecosystem.

ckeditor5-image

ckeditor5-image is a plugin for CKEditor 5 that provides comprehensive image handling capabilities, including insertion, resizing, and alignment. It offers a rich set of features similar to @tiptap/extension-image but is designed for use with CKEditor 5.

README

@tiptap/extension-image

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Official Documentation

Documentation can be found on the tiptap website.

License

tiptap is open sourced software licensed under the MIT license.