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.
Click on an image and use the contextual image toolbarto toggle captions on and off. Click on a caption to edit it.
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.
# Common API
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.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.