[Bug] elFinder integration for CKEditor not working as documented

[eleven59]

Bug report

What I did

Followed the instructions on https://backpackforlaravel.com/docs/6.x/crud-fields#ckeditor-pro which mention the following:

If you'd like to be able to select files from elFinder, you need to also run composer require backpack/filemanager to install elFinder.

What I expected to happen

Install elFinder, be able to select files from elFinder

What happened

No such luck. ElFinder integration is completely non-existent for CKEditor 5 as of the latest versions of everything:

backpack/crud: 6.7.11
backpack/filemanager: 3.0.7
backpack/pro: 2.2.0

What I've already tried to fix it

I made a workaround overriding the ckfinder plugin using a custom ckeditor init as found here: https://github.com/Laravel-Backpack/community-forum/issues/559#issuecomment-1630673757.

I did the following, using a ckeditor build that includes the ckfinder plugin which I put in assets/ckeditor.js:

In the CRUD controller setupUpdateOperation:

Widget::add()->type('script')->content('https://unpkg.com/jquery-colorbox@1.6.4/jquery.colorbox-min.js');
Widget::add()->type('style')->content('https://unpkg.com/jquery-colorbox@1.6.4/example2/colorbox.css');
CRUD::field('content')->type('ckeditor')->custom_build([
    resource_path('assets/ckeditor/ckeditor.js'),
    resource_path('assets/ckeditor/ckeditor-init.js')
]);

My assets/ckeditor/ckeditor-init.js file:

const elements = document.querySelectorAll('[data-init-function="bpFieldInitCKEditorElement"]');
let currentEditor = null;

elements.forEach(function (element) {
    ClassicEditor.create(element, element.dataset.options).then(editor => {
        editor.commands.get('ckfinder').execute = () => { openElfinder(element, editor); }
    }).catch(error => {
        console.error( error );
    });
});

function openElfinder(element, editor) {
    currentEditor = editor;
    // TODO: "admin" in the href URL should be dynamic
    $.colorbox({
        href: `/admin/elfinder/popup/${element.getAttribute('name')}`,
        fastIframe: false,
        iframe: true,
        width: '80%',
        height: '80%'
    });
}

// Hacky solution that works for links and images
// It would be better to have these integrated into the image and link functions, 
// like with the previous versions of Backpack and CKeditor 4.
function processSelectedFile(filePath) {
    // TODO: "/uploads/" in the href URL should be dynamic
    (async () => {
        const url = `/uploads/${filePath.replace(/\\/g,"/")}`,
            reponse = await fetch(url, { method: 'HEAD' }),
            contentType = reponse.headers.get('Content-Type');

        if (contentType.indexOf('image') === 0) {
            currentEditor.execute('imageInsert', { source: url });
        } else {
            currentEditor.execute('link', url);
        }
    })();
}

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there? Yes!

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

### PHP VERSION:
8.2.16

### PHP EXTENSIONS:
Core, date, libxml, openssl, pcre, sqlite3, zlib, bcmath, bz2, calendar, ctype, curl, dba, dom, hash, FFI, fileinfo, filter, ftp, gd, gmp, json, iconv, SPL, session, intl, standard, ldap, mbstring, mysqlnd, mysqli, pcntl, exif, imap, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, random, readline, redis, Reflection, imagick, shmop, SimpleXML, soap, sockets, sodium, sysvmsg, sysvsem, sysvshm, tokenizer, xml, xmlreader, xmlwriter, xsl, zip, Zend OPcache

### LARAVEL VERSION:
10.48.10.0

### BACKPACK PACKAGE VERSIONS:
backpack/basset: 1.3.4
backpack/crud: 6.7.11
backpack/filemanager: 3.0.7
backpack/generators: v4.0.5
backpack/permissionmanager: 7.2.1
backpack/pro: 2.2.0
backpack/settings: 3.1.1
backpack/theme-coreuiv2: 1.2.3

[karandatwani92]

Hey @eleven59

Sorry for the inconvenience. The CKEditor version upgrade broke elFinder integration. @pxpm is already working on the fix. We are actually working on something bigger: AjaxUploader, adding support to other editors, image drag-and-drop feature(similar to the GitHub comment box).

Things are in progress. We'll let you know by leaving an update here, but it may take some time.

[eleven59]

Hi @karandatwani92

That sounds awesome, thanks for the update and looking forward to the fix!

[karandatwani92]

[WIP] https://github.com/Laravel-Backpack/PRO/pull/217 , https://github.com/Laravel-Backpack/PRO/pull/215

[pxpm]

Fixed in PRO 2.2.2

See the updated docs: https://backpackforlaravel.com/docs/6.x/crud-fields#ckeditor-pro

Cheers