Custom Build CKEditor

[dvdmnc]

Hi @tabacitu

Just a follow up to this post : #593

Did you work on a way to integrate custom builds ? Because even if the method of eleven59 works, as he said it doesn't work on dynamic fields and we're going to need that on our project

Thank you

[backpack-ai-bot]

Yes, Backpack now supports custom CKEditor builds in version 6. Here's how you can integrate a custom CKEditor build:

1. Create your custom CKEditor build using the CKEditor 5 Online Builder.

2. Place the exported ckeditor.js file in your project, for example at resources/assets/ckeditor/ckeditor.js.

3. Create an initializer file, e.g. resources/assets/ckeditor/ckeditor-init.js, with the following content:

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

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

4. In your CRUD controller, use the custom_build option to include your custom build:

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

This method should work with dynamic fields as well, as it initializes all CKEditor fields on the page.

Source: Backpack Docs
Source: GitHub Issue Comment

Note that this approach completely overwrites Backpack's default CKEditor behavior, so you'll need to handle all events and methods required for proper functionality with Backpack.

Relevant sources:

Github Issue (closed): CKEditor toolbars in Backpack v6
Fields|CKEditor Custom Builds Part 1
Github Issue (closed): CKEDITOR.style.addCustomHandler is not a function
Github Issue (open): CkEditor(Wysiwyg) file upload
Github Issue (closed): [Bug] elFinder integration for CKEditor not working as documented
Github Issue (closed): [4.0][Feature req] No longer publish CSS & JS assets