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

guideInserting images

You can insert images by uploading them directly from your disk, but you can also configure CKEditor 5 to let you insert images using URLs. This way you can save time by adding images that are already online.

# Inserting images via a source URL

# Demo

To upload an image, use the image toolbar button Image. If you want to add an image through a URL, click the arrow next to the image button and paste the URL in the dropdown panel. To update an existing image, select it and paste a new URL in the dropdown panel.

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

Autumn fields

These demos in this guide present a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

This feature is enabled by default in all predefined builds.

Using the URL of an image, the user may paste it into the editor. 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';

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

This will add a new Insert image dropdown Insert image in the toolbar.

# Inserting images via pasting a URL into the editor

# Demo

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

Insert the URL of an image:

# Installation

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, and 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';

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. Click the “Undo” button in the toolbar or use the Ctrl/Cmd+Z keystrokes.

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