Image insertion behavior varies across browsers

When inserting images into contenteditable elements, the behavior varies significantly across browsers. Images may be inserted as <img> tags, as base64 data URLs, or may not be supported at all. The size, positioning, and editing behavior also differs.

Observed Behavior

Scenario 1: Pasting an image from clipboard

• Chrome/Edge: Inserts image as <img> tag with base64 data URL or file reference
• Firefox: May insert image or may not support pasting images
• Safari: Behavior varies, may insert image or require different approach

Scenario 2: Drag and drop an image file

• Chrome/Edge: Inserts image at drop location
• Firefox: May insert image or open file
• Safari: Behavior inconsistent

Scenario 3: Image size and dimensions

• Chrome/Edge: May preserve original size or apply default dimensions
• Firefox: May resize images automatically
• Safari: Size handling varies

Scenario 4: Image editing after insertion

• Chrome/Edge: Images can be selected and deleted, but resizing may be limited
• Firefox: Similar behavior
• Safari: May have different selection and editing behavior

Impact

• Inconsistent image insertion experience
• Large base64 data URLs can bloat HTML
• Difficulty controlling image size and positioning
• Some browsers may not support image insertion at all

Browser Comparison

• Chrome/Edge: Best support for image insertion via paste and drag-drop
• Firefox: Limited support, may require manual handling
• Safari: Most inconsistent behavior

Workaround

Implement custom image handling:

element.addEventListener('paste', (e) => {
  const items = Array.from(e.clipboardData.items);
  const imageItem = items.find(item => item.type.startsWith('image/'));
  
  if (imageItem) {
    e.preventDefault();
    const file = imageItem.getAsFile();
    const reader = new FileReader();
    
    reader.onload = (event) => {
      const img = document.createElement('img');
      img.src = event.target.result;
      img.style.maxWidth = '100%';
      img.style.height = 'auto';
      
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(img);
      }
    };
    
    reader.readAsDataURL(file);
  }
});

element.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  const imageFiles = files.filter(file => file.type.startsWith('image/'));
  
  imageFiles.forEach(file => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = document.createElement('img');
      img.src = event.target.result;
      img.style.maxWidth = '100%';
      img.style.height = 'auto';
      
      const range = document.caretRangeFromPoint?.(e.clientX, e.clientY) ||
                    document.createRange();
      range.insertNode(img);
    };
    reader.readAsDataURL(file);
  });
});

References

• Stack Overflow: Drop image into contenteditable in Chrome to the cursor - Image drop handling
• Froala Help: Can I insert images as base64? - Base64 image considerations