CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideInserting images

Besides the ability to insert images by uploading them directly from your disk or via CKFinder, you can also configure CKEditor 5 to allow inserting images via source URL. It is one of the fastest and most efficient ways to include images in the content is adding images that are already online.

# Installation

# Inserting images via source URL

Using the URL of an image, the user may easily paste it into the editor. In order to enable this option, install the ImageInsert plugin and add the insertImage toolbar item to the toolbar (it replaces the standard uploadImage button).

import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ... , ImageInsert ],
        toolbar: [ ... , 'insertImage' ]
    } )

This will add a new Insert image dropdown Insert image in the toolbar. To upload the image, click on the image icon. To open the panel and add the image URL, click the arrow next to the image button. Check the demo below to insert a new image via URL or update an existing image by selecting it, opening the dropdown panel and pasting a new URL.

Insert a new image or edit the source URL of the image below:

Autumn fields

# Inserting images via pasting URL into editor

The AutoImage plugin recognizes image links in the pasted content and embeds them shortly after they are injected into the document to speed up the editing. Accepted image extensions are: jpg, jpeg, png, gif, ico. Use the following code to enable the plugin in your editor. There is no toolbar configuration for this feature.

import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ... , AutoImage ]
    } )

The image URL must be the only content pasted to be properly embedded. Multiple links ("http://image.url http://another.image.url") as well as bigger chunks of content ("This link http://image.url will not be auto–embedded when pasted.") are ignored.

If the automatic embedding was unexpected, for instance when the link was meant to remain in the content as text, simply undo the action (by clicking the “Undo” button in the toolbar or using the Ctrl/Cmd+Z keystrokes).

You can paste the image URL directly into the editor content, and it will be automatically embedded.

Insert a URL of an image:

# Common API

The Image plugin registers:

The ImageUpload plugin registers:

  • The 'uploadImage' button that opens the native file browser to let you upload a file directly from your disk (to use in the image toolbar).
  • The 'uploadImage' command that accepts the file to upload.

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 in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.