✨(feat) Migrate to CKEditor 5 + allow back Php7.4

[floviolleau]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	yes
Deprecations?	yes
Fixed tickets	N/A
License	MIT

Hi,

This is a full rewrite to make it working with ckeditor 5.
Because I still use Symfony 5.4 and Php 7.4, I allowed to install with Php 7.4

Here is an example of configuration:

# Read the documentation: https://symfony.com/doc/current/bundles/FOSCKEditorBundle/index.html
twig:
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

fos_ck_editor:
    default_config: classic_config
    powered_by: false
    configs:
        balloon_config:
            build: 'balloon'
            toolbar: { items: ['bold', 'italic', 'bulletedList', 'link' ] }
        classic_config:
            build: 'classic'
            minHeight: '212px'
#            width: '50px'
#            licenseKey: 'your-license-key',
            toolbar: { items: ['undo', 'redo', '|', 'bold', 'italic', 'bulletedList', 'link' ] }
#            ui: { poweredBy: { position: 'inside', side: 'right', label: '' } }
#            extraPlugins: ['ResizableHeight']
#            ResizableHeight: {
#                resize: false,
#                height: '500px',
#                minHeight: '100px',
#                maxHeight: '1000px'
#            }
#            style: {
#                definitions: [
#                    {
#                        name: 'Article category',
#                        element: 'h3',
#                        classes: [ 'category' ]
#                    },
#                    {
#                        name: 'Info box',
#                        element: 'p',
#                        classes: [ 'info-box' ]
#                    },
#                ]
#            }
#            template: {
#                definitions: [
#                    {
#                        title: 'The title of the template',
#                        description: 'A longer description of the template',
#                        data: '<p>Data inserted into the content</p>'
#                    }
#                ]
#            }
    styles: { '.ck.ck-editor__editable': { 'background-color': 'red' }

#    plugins:
#        ResizableHeight:
#            path: '/bundles/ckeditor5-resizableheight/'
#            filename: 'plugin.js'

Remaining tasks:

• Tests need to be changed
• Be able to download several predefined builds to be able to use different config
• Make form type working with other things than ClassicEditor. The only editor type which can be initialized on <textarea> elements is the classic editor. This editor hides the passed element and inserts its own UI next to it. https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-editor-wrong-element
• Make Plugins working (blockers https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules and Your documentation is really bad ckeditor/ckeditor5#14745 (comment)

[Nek-]

Related issue: #242

[Chris53897]

@floviolleau Thanks for working on this. Could you please resolve the conflicts and give us an update of your plans (remaining tasks) ?

[floviolleau]

Hi @Chris53897,

I fixed the conflicts.

The remaining tasks are in the first message and still pending.

I have a basic usage of ckeditor5 so for now I didn't implemented plugins and other stuffs.

My PR is still pending since last year, nobody maintain this project so I implement what I need for now :).

Feel free to enhance my MR.

I made #272 for php8

[Nek-]

This PR really scares me regarding #242 (comment)

Would it be possible to make ckeditor5 optional?

[floviolleau]

Hi,

Ckeditor is OK if your are on GPL.

Make ckeditor5 optional is some work because logic to retrieve and do configuration is different as well the rendering.

I will think about it but it can be better if the maintainer is still here to guide developments and at least approve PR

[Mati365]

I released standalone integration designed especially for CKEditor 5. It's actively maintained and up to date with all CKE5 features and various distribution modes.

https://github.com/Mati365/ckeditor5-symfony