🖼️ Media Manager Plugin

Overview

The Media Manager plugin provides comprehensive media handling capabilities including upload, gallery organization, and asset management.

Features

• ✅ Drag & drop file upload
• ✅ Multi-file upload support
• ✅ Image gallery organization
• ✅ File browser interface
• ✅ Image optimization & compression
• ✅ CDN support for media delivery
• ✅ Custom upload endpoints
• ✅ Thumbnail generation

Installation

npm install @editora/plugins/media-manager

Basic Usage

import { Editor } from '@editora/core';
import { MediaManagerPlugin } from '@editora/plugins/media-manager';

const editor = new Editor({
  element: '#editor',
  plugins: [
    MediaManagerPlugin({
      uploadUrl: '/api/upload',
      galleryUrl: '/api/gallery'
    })
  ]
});

Configuration Options

Advanced Configuration

const plugin = MediaManagerPlugin({
  uploadUrl: '/api/media/upload',
  galleryUrl: '/api/media/gallery',
  maxFileSize: 52428800, // 50MB
  allowedTypes: [
    'image/jpeg',
    'image/png',
    'image/webp',
    'video/mp4',
    'audio/mpeg'
  ],
  onUpload: (file) => console.log('Uploading:', file),
  onError: (error) => console.error('Upload error:', error),
  compressionOptions: {
    maxWidth: 1920,
    maxHeight: 1080,
    quality: 0.8
  }
});

Server-Side Integration

Your upload endpoint should accept multipart/form-data:

// Express.js example
app.post('/api/upload', upload.single('file'), (req, res) => {
  // req.file contains the uploaded file
  const filename = req.file.filename;
  const url = `/uploads/${filename}`;
  
  res.json({ 
    success: true,
    url: url,
    name: req.file.originalname
  });
});

Events

plugin.on('upload', (data) => {
  console.log('File uploaded:', data);
});

plugin.on('error', (error) => {
  console.error('Upload error:', error);
});

plugin.on('gallery-load', (items) => {
  console.log('Gallery loaded:', items);
});

API Methods

uploadFile(file)

Upload a single file

plugin.uploadFile(fileInput.files[0]);

openGallery()

Open media gallery dialog

plugin.openGallery();

insertMedia(url, options)

Insert media from URL

plugin.insertMedia('https://example.com/image.jpg', {
  alt: 'Image description',
  width: '100%'
});

Styling

Customize the media manager appearance with CSS:

.media-manager {
  --primary: #007bff;
  --border: #ddd;
  --background: #fff;
}

.media-manager-dialog {
  max-width: 800px;
}

.media-item {
  border-radius: 8px;
  transition: transform 0.2s;
}

.media-item:hover {
  transform: scale(1.05);
}

Complete Example

import { Editor } from '@editora/core';
import { MediaManagerPlugin } from '@editora/plugins/media-manager';

// Initialize plugin
const mediaPlugin = MediaManagerPlugin({
  uploadUrl: '/api/upload',
  galleryUrl: '/api/gallery',
  maxFileSize: 20 * 1024 * 1024 // 20MB
});

// Listen to upload events
mediaPlugin.on('upload', (data) => {
  console.log('File uploaded successfully:', data.url);
});

// Create editor with plugin
const editor = new Editor({
  element: '#editor',
  plugins: [mediaPlugin]
});

// Upload files programmatically
document.getElementById('upload-btn').addEventListener('click', () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*,video/*';
  input.addEventListener('change', (e) => {
    mediaPlugin.uploadFile(e.target.files[0]);
  });
  input.click();
});