CKEditor Ecosystem Documentation
Search
⚠️ WarningNightly documentation ahead. Switch to the stable editor documentation.
Contribute to this guide
Home/CKEditor 5/Features

guideImage 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 Image caption to toggle captions on and off. Click on a caption to edit it.

Location of the most picturesque waterfalls of Iceland

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!

1. Kirkjufellsfoss
2. Seljalandsfoss
3. Skogafoss
4. Svartifoss
5. Godafoss
5. Godafoss

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:

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.