CkEditor 42 new builder not compatible with custom build

[pxpm]

Discussed in Laravel-Backpack/community-forum#1068

^{Originally posted by adambalint-srg July 6, 2024}
CkEditor new 42 version has a new builder (https://ckeditor.com/ckeditor-5/builder/). But it doesn't build a single file which is comaptible with backpack's custom build option, but a module-js plus a main.js file, and I can't use it here. What is the official way to use custom builds with this new ckeditor version?

[susanu]

Hi guys,

Since i needed the simple upload plugin from ckeditor, i upgraded to latest version and changed the field to support it.

Here is the ckeditor.blade.php field (please note that is tailored to my use case, it needs to be adjusted for general purpose and configuration):

{{-- CKeditor --}}
@php
    $field['extra_plugins'] = isset($field['extra_plugins']) ? implode(',', $field['extra_plugins']) : "";

    $defaultOptions = [
        "language" => app()->getLocale(),
        "filebrowserBrowseUrl" => backpack_url('elfinder/ckeditor'),
        "extraPlugins" => $field['extra_plugins'],
        "embed_provider" => "//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}",
    ];

    $field['options'] = array_merge($defaultOptions, $field['options'] ?? []);
@endphp

@include('crud::fields.inc.wrapper_start')
    <label>{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')
    <textarea
        name="{{ $field['name'] }}"
        data-init-function="bpFieldInitCKEditorElement"
        data-options="{{ trim(json_encode($field['options'])) }}"
        bp-field-main-input
        @include('crud::fields.inc.attributes', ['default_class' => 'form-control'])
        >{{ old_empty_or_null($field['name'], '') ??  $field['value'] ?? $field['default'] ?? '' }}</textarea>

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
@include('crud::fields.inc.wrapper_end')


{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
    @push('crud_fields_styles')
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css">
    @endpush

    @if(!isset($field['custom_build']))
        @push('before_scripts')
            <script type="importmap">
                {
                    "imports": {
                        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js",
                        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.2.0/"
                    }
                }
            </script>
        @endpush
    @endif

    {{-- FIELD JS - will be loaded in the after_scripts section --}}
    @push('crud_fields_scripts')
        @if(isset($field['custom_build']))
            @foreach($field['custom_build'] as $script)
                @basset($script)
            @endforeach
        @else
            <script>
                async function bpFieldInitCKEditorElement(element) {
                    import('ckeditor5').then(async (module) => {
                        let ckeditor = await module.ClassicEditor
                            .create(element[0], {
                                plugins: [
                                    module.AccessibilityHelp,
                                    module.Autoformat,
                                    module.AutoImage,
                                    module.Autosave,
                                    module.BalloonToolbar,
                                    module.BlockToolbar,
                                    module.BlockQuote,
                                    module.Bold,
                                    module.Essentials,
                                    module.Heading,
                                    module.ImageBlock,
                                    module.ImageCaption,
                                    module.ImageInline,
                                    module.ImageInsert,
                                    module.ImageInsertViaUrl,
                                    module.ImageResize,
                                    module.ImageStyle,
                                    module.ImageTextAlternative,
                                    module.ImageToolbar,
                                    module.ImageUpload,
                                    module.Indent,
                                    module.IndentBlock,
                                    module.Italic,
                                    module.Link,
                                    module.LinkImage,
                                    module.List,
                                    module.ListProperties,
                                    module.MediaEmbed,
                                    module.Paragraph,
                                    module.PasteFromOffice,
                                    module.RemoveFormat,
                                    module.SelectAll,
                                    module.SimpleUploadAdapter,
                                    module.SourceEditing,
                                    module.Table,
                                    module.TableCaption,
                                    module.TableCellProperties,
                                    module.TableColumnResize,
                                    module.TableProperties,
                                    module.TableToolbar,
                                    module.TextTransformation,
                                    module.TodoList,
                                    module.Underline,
                                    module.Undo
                                ],
                                toolbar: {
                                    items: [
                                        'undo',
                                        'redo',
                                        '|',
                                        'sourceEditing',
                                        '|',
                                        'heading',
                                        '|',
                                        'bold',
                                        'italic',
                                        'underline',
                                        'removeFormat',
                                        '|',
                                        'link',
                                        'insertImage',
                                        'mediaEmbed',
                                        'insertTable',
                                        'blockQuote',
                                        '|',
                                        'bulletedList',
                                        'numberedList',
                                        'todoList',
                                        'outdent',
                                        'indent'
                                    ],
                                    shouldNotGroupWhenFull: false
                                },
                                heading: {
                                    options: [
                                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                                    ]
                                },
                                image: {
                                    toolbar: [
                                        'toggleImageCaption',
                                        'imageTextAlternative',
                                        '|',
                                        'imageStyle:inline',
                                        'imageStyle:wrapText',
                                        'imageStyle:breakText',
                                        '|',
                                        'resizeImage'
                                    ]
                                },
                                simpleUpload: {
                                    uploadUrl: element[0].dataset.uploadurl,
                                    withCredentials: true,
                                    headers: {
                                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                    }
                                },
                                balloonToolbar: ['bold', 'italic', 'underline', 'heading', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'bulletedList', 'numberedList', 'blockQuote', 'link'],
                            });

                        //let ckeditor = await module.ClassicEditor.create(element[0], element.data('options'));
                        if(!ckeditor) return;

                        element.on('CrudField:delete', function(e) {
                            ckeditor.destroy();
                        });

                        // trigger the change event on textarea when ckeditor changes
                        ckeditor.editing.view.document.on('layoutChanged', function(e) {
                            element.trigger('change');
                        });

                        element.on('CrudField:disable', function(e) {
                            ckeditor.enableReadOnlyMode('CrudField');
                        });

                        element.on('CrudField:enable', function(e) {
                            ckeditor.disableReadOnlyMode('CrudField');
                        });
                    });
                }
            </script>
            <style>
                .ck-editor__editable {
                    min-height: 250px;
                }
            </style>
        @endif
    @endpush

{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}

Cheers!