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

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.

# 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

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

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 { ClassicEditor, Image, ImageInsert } from 'ckeditor5';

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

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

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

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 { ClassicEditor, Image, AutoImage } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ /* ... */ , Image, AutoImage ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

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 '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 that accepts a source (for example a URL) of an image to insert.

The ImageUpload 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).
  • 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.