CKEditor includes a number of plugins that extend the capabilities of the WYSIWYG HTML editor. One of the most useful plugins for inserting photos into editor content is the Image plugin. The Image plugin is included by default in the Standard and Full packages. You can use the image function to add and adjust images in the editor (alignment, border, link, etc.).

When introducing a picture into the editor text, the URL is usually required. CKEditor extensions can be used to extend the functionality of the Image plugin. The Enhanced Image plugin is quite handy for adding captioned images to CKEditor. It enables the editor content to include an image with a caption. In this article, we’ll teach you how to use the Enhanced Picture plugin in CKEditor to insert an image with a caption.

Add CKEditor to the webpage’s textarea before starting to improve the editor. After that, add the Enhanced Image plugin to the CKEditor and use it to insert the captioned image.

Installation of the Enhanced Image Add-on

The Enhanced Image plugin can be downloaded here.
Extract the plugin archive and store it in your CKEditor installation’s plugins folder.

ckeditor/plugins/image2

To enable the plugin, use the extraPlugins configuration parameter. Add the following code to the ckeditor/config.js file.

config.extraPlugins = ‘image2’;

Please note that our source code includes all essential files. The plugin files do not need to be downloaded separately.

Textarea using CKEditor
To add CKEditor to a webpage, create a textarea element.

<textarea name="editor" id="editor" rows="10" cols="80"></textarea>/* Your code... */

Include the CKEditor plugin’s library file.

<script src="ckeditor/ckeditor.js"></script>/* Your code... */

CKEDITOR is used to start the CKEditor. Replace the textarea element with CKEditor using the replace()

<script>
CKEDITOR.replace('editor');
</script>

Use CKEditor to add a captioned image.

A popup will show once you click the insert image icon in the toolbox. Captioned picture option will be available at the bottom of the image dialogue. To insert a captioned image, make sure this box is checked.

The Captioned image option in the CKEditor inserts an image with a caption. In the editor content, you can also add custom captions underneath the photographs.