This package has been deprecated

Author message:

1.x should NOT be used. Instead use @ckpro/ckeditor5-upload-adapter 2+

ckeditor5-upload-adapter

# ckeditor5-upload-adapter

ckeditor5-upload-adapter is a 3. party free upload adapter for CKEditor 5 that also supports CSRF prevention then uploading images.

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 ckeditor5-upload-adapter)
• Roll your own upload adapter

Full 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 AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
//import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; // Remove this if it exists
//import CKFinderPlugin from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; // Remove this if it exists
//import EasyImagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage'; // Remove this if it exists
import UploadAdapterPlugin from 'ckeditor5-upload-adapter'; // Add this
// ...
 
ClassicEditor.builtinPlugins = [
    EssentialsPlugin,
    AutoformatPlugin,
    BoldPlugin,
    ItalicPlugin,
    BlockQuotePlugin,
    //UploadAdapterPlugin, // Remove this if it exists
    //CKFinderPlugin, // Remove this if it exists
    //EasyImagePlugin, // Remove this if it exists
    ImagePlugin,
    ImageUploadPlugin,
    UploadAdapterPlugin // Add this (the exported classname from ckeditor5-upload-adapter, UploadAdapterPlugin, is the same as from ckeditor5-adapter-ckfinder, however the source files are different)
    // ...
]

//#2 : Then creating the CKEditor5 set the UploadAdapterPlugin uploadUrl (mandatory) & any headers (optional) :

ClassicEditor.create(document.querySelector('#editor'), {
    uploadAdapter: {
        uploadUrl: '/home/ImageUpload', // url to server-side http endpoint // mandatory
        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 file (eg. image) 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 = "";
 
    // do your stuff with the (image) file and save it on your server
 
    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
        });
    }
}