CKEditor toolbars in Backpack v6

[prodixx]

Hi guys!

I'm giving a shot to V6 for a new project and i've noticed that ckeditor and wysiwyg fields no longer loads the same toolbars like in V5. Also extra_plugins doesn't work anymore on them.

[
    'name' => 'full_details',
    'label' => 'Detalii',
    'type' => 'wysiwyg',
    // 'extra_plugins' => ['colordialog', 'colorbutton', 'justify'],
    'options' => [
        'customConfig' => asset('js/ckeditor_config.js'),
    ],
    'tab' => 'General',
    'wrapperAttributes' => ['class' => 'form-group col-md-12'],
],

I;ve tried to load custom config (from v5) but with no results.

Any ideas how i can accomplish this?

Thanks.

[tabacitu]

Hmm you are correct - because those fields are using Basset now, the process of using extra plugins has changed. @promatik could you please help @prodixx here with steps on how to do it? Do we need to document this in the field docs? Do we need an upgrade guide for this? 🤷‍♂️

[promatik]

Hi @prodixx! Backpack now uses CKEditor v5 (previously it was v4), and CKEditor 5 made the process of customizing the interface quite different.

Now you'll need to go to CKEditor 5 Online builder;

1) Choose plugins

2) Customize the view

3) Export your build

---

After this, you can now use your own build on backpack 👌 I've placed the following files at resources\assets\ckeditor:

• ckeditor.js (the exported ckeditor build)
• ckeditor-init.js (my ckeditor initializer)

Since you're using a costum build, backpack will no longer initialize it, so you'll need to do it on ckeditor-init.js:

let element = document.querySelector('[name="your-ckeditor-fieldname"]');
ClassicEditor.create(element, element.dataset.options);

And then create the field with the custom_build:

CRUD::addField([
    'name' => 'ckeditor',
    'type' => 'ckeditor',
    'custom_build' => [
        resource_path('assets/ckeditor/ckeditor.js'),
        resource_path('assets/ckeditor/ckeditor-init.js'),
    ],
]);

---

And that's it, I added the underline plugin to my custom ckeditor:

[pxpm]

Just to add a note that if you have too much stuff customized and CKeditor 4 is more than enough for your needs, you can just go to v5 branch, copy the ckeditor file as ckeditor_v4.blade.php and use it instead of the ckeditor Backpack provides.

I would just probably advise to also change the <scripts> etc to be loaded through @basset and use CoreUIv2 theme because of Bootstrap 4, I think ckeditor has issues with BS 5.

Nice tutorial @promatik 🙏 and thanks for answering this on on my turn!

Cheers

[tabacitu]

Awesome! @prodixx let us know if this isn't what you wanted, or have feedback. We'll reopen if needed. Cheers!

[adrienne]

@tabacitu @pxpm - fyi, I did a custom build, but things get very squirrelly with your instructions above if there are multiple CKEditor fields on the page. What I ended up doing is as follows:

1. Make the custom build as described above
2. Add the ckeditor.js file to resources/assets/js/
3. Copy the view from vendor/backpack/pro/resources/views/fields/ckeditor.blade.php to resources/views/vendor/backpack/crud/fields/ckeditor.blade.php
4. Change line 44 of the copied blade file from:

   @basset('https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js')

   to

   @basset(resource_path('/assets/js/ckeditor.js'))

This works for me!

[prodixx]

@adrienne you can match all ckeditor fields in the page like this:

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

elements.forEach(function (element) {
    ClassicEditor.create(element, element.dataset.options);
});

[adrienne]

@prodixx yeah, matching them wasn't the problem -- it was causing all sorts of double-initialization problems and such.

This way seems cleaner.

[prodixx]

i have 4 fields on page and i didn't saw anything fishy . now that you've said it, ill double check it...

[lebedynskyi]

@adrienne @prodixx Seems the steps are mentioned above does not work for me at all. Every time I see 404 for new scripts of ckeditor when browser tries to fetch it.

Here I've posted a question on SO with more explanation

[promatik]

Hey @lebedynskyi! I answered your SO question 👌

I will add the same answer here as a reference 👌

---

Make sure you placed the files in the correct path: \resources\assets\ckeditor\ckeditor.js. This path can be different, but make sure you do the

Make sure you only placed there what's inside the build folder.

\translations\
\ckeditor.js
\ckeditor.js.map

If that path is correct, please go to basset folder (default is \public\storage\basset\) and check if the files are cached there, at \public\storage\basset\resources\assets\ckeditor\ckeditor.js.

I'm assuming basset is working properly for you otherwise the admin panel would have issues, so it should be related with this paths 👌

If the files are there, it should work. If the files aren't there, something is wrong with the placement of the files.

Let me know 🙌

[lebedynskyi]

I don't know how.. Did the same on fresh install - works fine..