Contribute to this guideReport an issue

guideBase64 upload adapter

The Base64 image upload adapter plugin converts images inserted into the editor into Base64 strings in the editor output.

This kind of image upload does not require server processing – images are stored with the rest of the text and displayed by the web browser without additional requests. On the downside, this approach can bloat your database with very long data strings which, in theory, could have a negative impact on the performance.

Check out the comprehensive Image upload overview to learn about other ways to upload images into CKEditor 5.

# Example

Use the editor below to see the adapter in action. Open the web browser console and click the button below to see the base64–encoded image in the editor output data.

Paste or drop an image directly into the editor. You can also use the "Insert image" button in the toolbar.

# Installation

The @ckeditor/ckeditor5-upload package is available by default in all builds. The installation instructions are for developers interested in building their own, custom WYSIWYG editor.

To add this feature to your editor, install the @ckeditor/ckeditor5-upload package:

npm install --save @ckeditor/ckeditor5-upload

Then add the Base64UploadAdapter to your plugin list:

import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/base64uploadadapter';

    .create( document.querySelector( '#editor' ), {
        plugins: [ Base64UploadAdapter, ... ],
        toolbar: [ ... ]
    } )
    .then( ... )
    .catch( ... );

Once enabled in the plugin list, the upload adapter works out–of–the–box without additional configuration.

Read more about installing plugins.

# What’s next?

Check out the comprehensive Image upload overview to learn more about different ways of uploading images in CKEditor 5.

See the Image feature guide to find out more about handling images in CKEditor 5.

# Contribute

The source code of the feature is available on GitHub in