@tiptap/extension-image
Advanced tools
@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.
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();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 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 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.
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.
Documentation can be found on the Tiptap website.
Tiptap is open sourced software licensed under the MIT license.
FAQs
image extension for tiptap
The npm package @tiptap/extension-image receives a total of 486,082 weekly downloads. As such, @tiptap/extension-image popularity was classified as popular.
We found that @tiptap/extension-image demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
