# Inserting 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.

<a id="inserting-images-via-a-source-url">

## Inserting images via a source URL

<a id="demo">

### Demo

To upload an image, use the image toolbar button . 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.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

> **Note**
>
> These demos in this guide present a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

### Installation

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).

**NPM**

```js
import { ClassicEditor, Image, ImageInsert } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Image, ImageInsert, /* ... */  ],
		toolbar: [ 'insertImage', /* ... */  ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Image, ImageInsert } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Image, ImageInsert, /* ... */  ],
		toolbar: [ 'insertImage', /* ... */  ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

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

<a id="inserting-images-via-pasting-a-url-into-the-editor">

## Inserting images via pasting a URL into the editor

<a id="demo-2">

### Demo

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="installation-2">

### Installation

The [`AutoImage`](../../api/module_image_autoimage-AutoImage.md) 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.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		plugins: [ /* ... */ , Image, AutoImage ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> 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.

<a id="common-api">

## Common API

The [`Image`](../../api/module_image_image-Image.md) plugin registers:

* The `'insertImage'` toolbar dropdown component that aggregates all image insert methods available in the current editor setup.
* The `'insertImageViaUrl'` toolbar button that opens a modal dialog to let you insert an image by specifying the image URL.
* The [`'insertImage'` command](../../api/module_image_image_insertimagecommand-InsertImageCommand.md) that accepts a source (for example a URL) of an image to insert.

The [`ImageUpload`](../../api/module_image_imageupload-ImageUpload.md) plugin registers:

* The `'uploadImage'` toolbar button that opens the native file browser to let you upload a file directly from your disk (to use in the [image toolbar](images-overview.md#image-contextual-toolbar)).
* The [`'uploadImage'` command](../../api/module_image_imageupload_uploadimagecommand-UploadImageCommand.md) that accepts the file to upload.

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) 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.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)