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