Image captions

The ImageCaption plugin adds support for image captions:

<figure class="image">
    <img src="..." alt="...">
    <figcaption>A caption goes here...</figcaption>
</figure>

By default, if the image caption is empty, the <figcaption> element is not visible to the user. You can click the image to reveal the caption field and write one. See the demo below.

# Demo

Click on an image and use the contextual image toolbar to toggle captions on and off. Click on a caption to edit it.

Rich Text Editor

While exploring Iceland one would surely put the wild, unbridled nature on the top of the sightseeing list. But where should one start? Considering this amazing island brings together fire with ice we may expect water landscapes a nice starting point.

Due to the mountainous terrain, plenty of rivers encounter numerous obstacles while running their waters. Where boulders cross the current or the rock sharply end, the wild waters of Icelandic streams, brooks, creeks and rivers will rapidly fall forming breathtaking and picturesque waterfalls.

We have chosen a few of those that we deem the most worth visiting for their breathtaking beauty. Plan your round trip carefully, not to miss any of these natural wonders!

You can change the placement of the image caption by setting caption-side in your content styles for the .ck-content .image > figcaption style. Changing it to caption-side: top will display the caption above the image.

# Installation

This feature is available in all ready-to-use editor builds. If your integrations uses a custom editor build, check out the image features installation guide to learn how to enable this feature.

# Common API

The ImageCaption plugin registers:

The 'toggleImageCaption' button (to use in the image toolbar).
The 'toggleImageCaption' command

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.