@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
});
}
}