đŸ–ŧī¸ Image Plugin

Advanced image manipulation and insertion

Overview

The Image plugin enables advanced image manipulation and management within the editor. Users can insert, resize, crop, adjust colors, add captions, and embed images from various sources with full control over placement and styling.

Features

  • ✓ Image upload and insertion
  • ✓ Drag-and-drop reordering
  • ✓ Image resizing and cropping
  • ✓ Color adjustment
  • ✓ Image captions
  • ✓ URL embedding
  • ✓ Alt text and accessibility
  • ✓ Gallery layouts

Installation

npm install @editora/plugin-image

Basic Usage

import Editora from '@editora/core';
import ImagePlugin from '@editora/plugin-image';

const editor = new Editora('#editor');
editor.use(ImagePlugin, {
    uploadUrl: '/api/upload',
    maxSize: 5000000 // 5MB
});

Image Management

Work with images efficiently:

  1. Upload: Click image icon or drag-drop images
  2. Resize: Drag handles or enter dimensions
  3. Crop: Use crop tool for precise framing
  4. Style: Add captions, borders, and alignment

Configuration Options

Option Type Description
uploadUrl string Server endpoint for image uploads
maxSize number Maximum file size in bytes (default: 5MB)
allowedTypes string[] Allowed MIME types

API Methods

  • insertImage(url): Insert image from URL
  • resizeImage(width, height): Resize selected image
  • cropImage(coords): Crop image to coordinates
  • getImageUrl(): Get URL of selected image