🖼️ QuillKit - Image Resize Demo

Test the image insertion and resizing features

⚠️ API Key Required: QuillKit requires a valid API key to function. This demo uses a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.

📋 How to Use Image Resize

Insert Image: Click the 🖼 button in the toolbar
Set Dimensions: Optionally specify width and height in pixels when inserting
Drag to Resize: Hover over any corner of an inserted image to see resize handles
Proportional Resizing: Drag any corner handle to resize while maintaining aspect ratio
Minimum Size: Images cannot be resized smaller than 50px

✨ Features

Specify Pixel Dimensions: Enter exact width/height when inserting an image
Drag to Resize: Click and drag corner handles to resize images visually
Maintain Aspect Ratio: Resizing preserves the original image proportions
Visual Feedback: Blue resize handles appear on image corners
Auto-Apply to New Images: All images automatically get resize handles

Sample Code

// Initialize editor
const editor = QuillKit.init('#my-editor', {
  toolbar: true,
  height: '500px'
});

// Images automatically get resize handles
// You can also insert images programmatically:
// SelectionUtils.insertImage('url', 'alt text', width, height);
    