Core Image Functionality

/**
 * Main image plugin that loads both block and inline image functionality
 */
class Image {
  static pluginName: 'Image';
  static requires: [ImageBlock, ImageInline];
  static isOfficialPlugin: true;
}

import { Image } from '@ckeditor/ckeditor5-image';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [Image],
    toolbar: ['imageUpload']
  });

/**
 * Block image functionality with figure wrapper and caption support
 */
class ImageBlock {
  static pluginName: 'ImageBlock';
  static requires: [ImageBlockEditing, Widget, ImageTextAlternative, ImageInsertUI];
  static isOfficialPlugin: true;
}

/**
 * Inline image functionality for images within text content
 */
class ImageInline {
  static pluginName: 'ImageInline';
  static requires: [ImageInlineEditing, Widget, ImageTextAlternative, ImageInsertUI];
  static isOfficialPlugin: true;
}

/**
 * Common image editing functionality shared between block and inline images
 */
class ImageEditing {
  static pluginName: 'ImageEditing';
  static requires: [ImageUtils, Clipboard, ImageLoadObserver];
  static isOfficialPlugin: true;
}

/**
 * Block image editing functionality with schema and converters
 */
class ImageBlockEditing {
  static pluginName: 'ImageBlockEditing';
  static requires: [ImageEditing, ImageUtils, ImagePlaceholder, PictureEditing];
  static isOfficialPlugin: true;
}

/**
 * Inline image editing functionality with schema and converters
 */
class ImageInlineEditing {
  static pluginName: 'ImageInlineEditing';
  static requires: [ImageEditing, ImageUtils, ImagePlaceholder, PictureEditing];
  static isOfficialPlugin: true;
}

/**
 * Placeholder functionality during image loading to prevent layout shifts
 */
class ImagePlaceholder {
  static pluginName: 'ImagePlaceholder';
  static requires: [ImageUtils];
  static isOfficialPlugin: true;
}

/**
 * Automatically converts pasted image URLs into image elements
 */
class AutoImage {
  static pluginName: 'AutoImage';
  static requires: [Clipboard, ImageUtils, Undo];
  static isOfficialPlugin: true;
}

import { AutoImage } from '@ckeditor/ckeditor5-image';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [AutoImage],
    // URLs pasted into the editor will automatically become images
  });

/**
 * Enables width and height attributes for images to prevent layout shifts
 */
class ImageSizeAttributes {
  static pluginName: 'ImageSizeAttributes';
  static requires: [ImageUtils];
  static isOfficialPlugin: true;
}

/**
 * Contextual toolbar for selected images with customizable button configuration
 */
class ImageToolbar {
  static pluginName: 'ImageToolbar';
  static requires: [WidgetToolbarRepository, ImageUtils];
  static isOfficialPlugin: true;
}

ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      toolbar: [
        'imageTextAlternative',
        'toggleImageCaption',
        '|',
        'imageStyle:inline',
        'imageStyle:wrapText',
        'imageStyle:breakText',
        '|',
        'resizeImage'
      ]
    }
  });

/**
 * HTML5 picture element support with responsive images and multiple source formats
 */
class PictureEditing {
  static pluginName: 'PictureEditing';
  static requires: [ImageEditing, ImageUtils];
  static isOfficialPlugin: true;
}

/**
 * Observer that watches for image loading events and triggers layout updates
 */
class ImageLoadObserver {
  constructor(view: View);
  observe(domElement: Element, name: string): void;
  stopObserving(domElement: Element): void;
}

interface ImageLoadedEvent {
  name: 'imageLoaded';
  args: [{ imageElement: ViewElement }];
}

// The observer is automatically used by image editing plugins
// It fires 'imageLoaded' events when images finish loading
editor.editing.view.document.on('imageLoaded', (evt, data) => {
  console.log('Image loaded:', data.imageElement);
});