Image captions
The ImageCaption plugin lets you add captions to images by providing support for the <figcaption> element.
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!
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!
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.
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.
To enable this feature, you need to load the LinkImage plugin. Read more in the installation guide.
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.
The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.