LinkImage plugin adds support for linking images. Some use cases where this could be useful are:
- Linking to a high-resolution version of an image.
- Using images as thumbnails linking to an article or product page.
- Creating banners linking to other pages.
The image link can be added or edited via the image toolbar. An icon in top right corner of the image indicates the presence of a link.
An example source code for block image would look similar to this one:
<figure class="image"> <a href="..."> <img src="..." alt="..."> </a> <figcaption>Image caption</figcaption> </figure>
An inline image code would look more like this:
<a href="..."> Some text <img src="..." alt="..." style="width: 20px"> </a>
Click on the images to invoke the contextual toolbar. Use the link iconto access the editing options for links on an image. Also notice the icon in the top-right corner of the image, indicating there is a link attached to the image.
# Common API
LinkImage plugin registers:
'linkImage'button that opens the link UI when an image is selected by the user (to use in the image toolbar).
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-link.