Image captions

The ImageCaption plugin lets you add captions to images by providing support for the <figcaption> element.

# Demo

Click one of the images below and use the contextual image toolbar to toggle the caption on and off. Click the caption to edit it.

Welcome to Iceland!

Location of the most picturesque waterfalls of Iceland

Iceland’s wild, unbridled nature will surely land on top of your sightseeing list. But where should you start? As this amazing island brings together fire and ice, why not choose the product of this union — water — as your starting point?

The mountainous terrain gives Iceland’s rivers numerous obstacles. Where the wild waters of Icelandic streams, creeks, and rivers encounter a boulder or a sharp edge of a rock, they cascade down in picturesque waterfalls.

We have chosen a few especially breathtaking ones. Plan your round trip wisely so you don’t miss any of these natural wonders!

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

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.

# Additional feature information

The ImageCaption plugin adds support for the <figcaption> element:

<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.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

To enable this feature, you need to load the LinkImage plugin. Read more in the installation guide.

# 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 at 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.

With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.