CKEditor 5 implementation is wrong

Created on 25 May 2024, 6 months ago
Updated 12 June 2024, 5 months ago

Problem/Motivation

The CKEditor plugin implementation is wrong.

The current code contains two package json but both are not used to compile the plugin.

Need to create proper plugin name and package.json and and required
Webpack.config.js

User interface changes

Missing the colour picker for font color, background color

🐛 Bug report
Status

Needs review

Version

2.0

Component

Code

Created by

🇮🇳India vipul tulse

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @vipul tulse
  • Status changed to Needs review 6 months ago
  • 🇺🇸United States tjtj

    Please release a CKEditor5 version that works already. It has been a year.

  • 🇺🇸United States jimmynash

    Applying this patch seems to get past the upgrade path issues I had when first trying to update to CKEditor5.
    When implementing the buttons into a profile though I get errors when loading the editor on fields.

    Background Color and Font Color buttons throw this error and do not allow the editor to load.

    TypeError: r.ColorSelectorView is not a constructor
        colorSelectorView https://mysite.local/modules/contrib/ckeditor_font/js/build/font.js?seo4bv:671
        init https://mysite.local/modules/contrib/ckeditor_font/js/build/font.js?seo4bv:674
        create https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        n https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        fillFromConfig https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        _initToolbar https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        init https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        create https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        promise callback*create/< https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        create https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        attach https://mysite.local/core/modules/ckeditor5/js/ckeditor5.js?seo4bv:174
        editorAttach https://mysite.local/core/modules/editor/js/editor.js?v=9.5.11:148
        attach https://mysite.local/core/modules/editor/js/editor.js?v=9.5.11:108
        attach https://mysite.local/core/modules/editor/js/editor.js?v=9.5.11:99
        attachBehaviors https://mysite.local/core/misc/drupal.js?v=9.5.11:24
        attachBehaviors https://mysite.local/core/misc/drupal.js?v=9.5.11:21
        <anonymous> https://mysite.local/core/misc/drupal.init.js?v=9.5.11:24
        listener https://mysite.local/core/misc/drupal.init.js?v=9.5.11:14
        domReady https://mysite.local/core/misc/drupal.init.js?v=9.5.11:20
        <anonymous> https://mysite.local/core/misc/drupal.init.js?v=9.5.11:23
        <anonymous> https://mysite.local/core/misc/drupal.init.js?v=9.5.11:26
    ckeditor5.js:201:17

    FontFamily and FontSize plugins throw this error and prevent the editor from loading.

    TypeError: t is not iterable
        _setUpBindToBinding https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        using https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        pe https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        init https://mysite.local/modules/contrib/ckeditor_font/js/build/font.js?seo4bv:322
        create https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        n https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        fillFromConfig https://mysite.local/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
        _initToolbar https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        init https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        create https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        promise callback*create/< https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        create https://mysite.local/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=35.4.0:4
        attach https://mysite.local/core/modules/ckeditor5/js/ckeditor5.js?seo4bv:174
        editorAttach https://mysite.local/core/modules/editor/js/editor.js?v=9.5.11:148
        attach https://mysite.local/core/modules/editor/js/editor.js?v=9.5.11:108
        attach https://mysite.local/core/modules/editor/js/editor.js?v=9.5.11:99
        attachBehaviors https://mysite.local/core/misc/drupal.js?v=9.5.11:24
        attachBehaviors https://mysite.local/core/misc/drupal.js?v=9.5.11:21
        <anonymous> https://mysite.local/core/misc/drupal.init.js?v=9.5.11:24
        listener https://mysite.local/core/misc/drupal.init.js?v=9.5.11:14
        domReady https://mysite.local/core/misc/drupal.init.js?v=9.5.11:20
        <anonymous> https://mysite.local/core/misc/drupal.init.js?v=9.5.11:23
        <anonymous> https://mysite.local/core/misc/drupal.init.js?v=9.5.11:26
    ckeditor5.js:201:17

    Taking the all of these buttons out of the profile allows the editor to load again.

    Drupal 9.5.11
    FireFox 126.0.1

  • 🇺🇸United States kerasai

    I'm curious as to what the issue is that this change is intended to fix.

    Upgrading to the latest release (2.0.0-beta4) seems to work with core 10.1.8.

  • 🇮🇳India vipul tulse

    @kerasai Thete is a way to create CKEditor 5 plugin structure when we do some changes to the plugin code we build though the webpack for that we need proper webpack and we found security issue with packages inside package.json are older while security audit, we have upgraded that. https://git.drupalcode.org/project/ckeditor_font/-/merge_requests/20/dif...

    Last one the current plugin missing the color picker implementation you can see below screenshot

Production build 0.71.5 2024