@ckpro/ckeditor5-upload-adapter

Upload images (and other files) using either Fetch or xmlHttpRequest.

If you want to upload images in CKEditor 5, you have the following options :

• Pay for a commercial upload adapter (CKFinder or EasyImage)
• Use a free 3. party upload adapter (such as @ckpro/ckeditor5-upload-adapter)
• Roll your own upload adapter

@ckpro/ckeditor5-upload-adapter is a free modern upload adapter for CKEditor 5 that supports not only Fetch but also CSRF prevention.

Full @ckpro/ckeditor5-upload-adapter official documentation here : How to custom build CKEditor 5 with image upload support. The full documentation also contains step-by-step creation of editor, http endpoint and CSRF prevention.

Below is a short usage documentation.

//#1 : In your CKEditor5 build file REMOVE any reference to CKFinder & EasyImage and ADD references to ckeditor5-upload-adapter:

// app.js

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
//import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; // Remove this if it exists
//import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; // Remove this if it exists
import Image from '@ckeditor/ckeditor5-image/src/image'; // Mandatory
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; // Mandatory
import UploadAdapter from '@ckpro/ckeditor5-upload-adapter'; // Add this
// ...

ClassicEditor.builtinPlugins = [
    Essentials,
    Bold,
    //CKFinder, // Remove this if it exists
    //EasyImage, // Remove this if it exists
    Image, // Mandatory
    ImageUpload, // Mandatory
    UploadAdapter // Add this 
    // ...
]

//#2 : Then creating the CKEditor 5 set the UploadAdapter properties : uploadUrl (mandatory), useFetch (optional) & any headers (optional) :

ClassicEditor.create(document.querySelector('#editor'), {
    uploadAdapter: {
        uploadUrl: '/home/ImageUpload', // mandatory (url to server-side http endpoint)
        useFetch: true, // optional
        headers : { "headerKey1": "headerValue1", "headerKey2": "headerValue2" } // optional (eg. in asp.net core for CSRF prevention you would have headers : { "RequestVerificationToken": _serverSideGeneratedCSRFToken })
    }
        // ...
});

//#3 : Create a server-side http endpoint to which the (image) file is uploaded :

// Http endpoint example in asp.net core c# : (full code example available in official documentation : How to custom build CKEditor 5 with image upload support)

[HttpPost]
public JsonResult ImageUpload(IFormFile file)
{
	string error = "";
	string serverUrlToFile;

	// do your stuff with the (image) file, save it on your server and initialize serverUrlToFile with a public url the saved (image) file

	if (error)
	{
		return Json(new
		{
			uploaded = false,
			error = error
		});
	}
	else
	{
		return Json(new
		{
			uploaded = true,
			url = serverUrlToFile // the public url to the (image) file you have saved on your server
		});
	}
}