Contribute to this guide

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.

# 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 button 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 in the toolbar Insert image. 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.

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.