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.

Rich Text Editor

Welcome to 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

This feature is available in all ready-to-use editor builds. If your integration 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 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.