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.