CKEditor has a number of plugins that extend the capabilities of the WYSIWYG HTML editor. One of the most helpful plugins for inserting photos into editor content is the Image plugin. The Image plugin is included by default in the Standard and Full packages. The picture function allows you to add and adjust images in the editor (alignment, border, link, etc.).
In most cases, the URL must be supplied when introducing an image into the editor text. CKEditor extensions can be used to extend the capabilities of the Image plugin. The Enhanced Image plugin is quite handy for adding captioned images to CKEditor. It allows you to insert an image with a caption into the editor's content. In this article, we'll teach you how to use the Enhanced Picture plugin to insert an image with a description into CKEditor.
Enhanced Image Add-on Installation
1. Get the Enhanced Image plugin.
2. Unzip the plugin archive and place it in the plugins folder of your CKEditor installation.
3. Enable the plugin using the extraPlugins configuration parameter. Add the following code to the ckeditor/config.js file.
config.extraPlugins = 'image2';
Please keep in mind that all necessary files are included in our source code. The plugin files do not need to be downloaded separately.
Add CKEditor to Textarea
To include CKEditor, add a textarea element to the webpage.
<textarea name="editor" id="editor" rows="10" cols="80"></textarea>
Include the CKEditor plugin's library file.
Initialize the CKEditor using CKEDITOR.replace() method and replace the textarea element with CKEditor.
Insert Captioned Image in CKEditor
A popup will show when you click the insert picture icon in the toolbox. Captioned picture will be available at the bottom of the image dialogue. To include a captioned image, select this option.
The Captioned picture option puts a captioned image into the CKEditor. In the editor content, you can also add custom captions underneath the photographs.