Problem with CKEditor and Drupal 11.2

See: https://www.drupal.org/project/editor_advanced_link/issues/3531194 🐛 D11.2: Uncaught CKEditorError: Cannot read properties of undefined (reading 'viewUid') Active

There appears to be an ongoing (not resolved) issue with 11.2 and ckeditor. I'm not sure that Alaa will be able to do anything about it but you may need to wait to see what he says.

Following up on #2, I have a local ddev site that I am using to test the views vanilla slideshow module (and teach myself how to use it). I just updated it from 11.2.1 to 11.2.2 and it works. But I am not using any of the problematic code reported in issue 3531194 so I may not have stumbled into any of the issues reported there in 3531194. Probably avoiding 11.2.1 and 11.2.2 for now would be safest until the core and ckeditor gurus can figure things out. There have been three 11.2.x production releases and two release candidates since June 11 so this might indicate some need for caution in updating production systems to 11.2.

Hello,

*Request for font ‘Source Sans Pro’ blocked at visibility level 2 (requires 3):
This occurs because the browser’s tracking protection or strict privacy settings are blocking the web font from loading when requested from a third-party domain. This is not a Drupal or CKEditor issue but a browser privacy behavior.
Solution: change it in the theme settings to load it locally.

*https://www.gmpe.it/libraries/dom_purify/dist/purify.min.js blocked due to MIME mismatch:
The file is missing or misconfigured on the server, causing it to return text/html instead of application/javascript, leading to the browser blocking it.
Solution: Ensure purify.min.js is correctly uploaded to: /libraries/dom_purify/dist/purify.min.js

*TypeError: can't access property "pencil", e.icons is undefined:
This is likely caused by an incompatible CKEditor 5 plugin attempting to access e.icons.pencil, which is undefined in the current CKEditor 5 version shipped with Drupal 11.2.
Solution: It is related to one of the ckeditor plugins. If you are using https://www.drupal.org/project/anchor_link → , ensure it is updated to the latest version for CKEditor 5 compatibility.

Best wishes,
Alaa

Thanks for the quick and precise reply, as always.

1.
a) in the sub-theme I selected:
- Tick this box to load the W3.CSS library locally.
- Tick this box to load Google fonts locally. (Global and Heading Fonts only)

b) In the browser I disabled fingerprinting protection.

2.
I renamed dompurify to dom_purify. It worked before without this change.

3.
Anchor_link is updated to the latest version.

The toolbar is not present yet and in the browser console I have:

GET
https://www.gmpe.it/themes/custom/gmpe/css/ckeditor.css?synqe6
NS_ERROR_CORRUPTED_CONTENT

La risorsa da “https://www.gmpe.it/themes/custom/gmpe/css/ckeditor.css?synqe6” è stata bloccata a causa della mancata corrispondenza (“text/html”) del tipo MIME (X-Content-Type-Options: nosniff). edit
Debugging can be done with an unminified version of CKEditor by installing from the source file. Consult documentation at https://www.drupal.org/node/3258901 ckeditor5.js:463:19
TypeError: can't access property "pencil", e.icons is undefined
    Ce https://www.gmpe.it/libraries/ckeditor5-anchor-drupal/build/anchor-drupal.js?synqe6:101
    _createActionsView https://www.gmpe.it/libraries/ckeditor5-anchor-drupal/build/anchor-drupal.js?synqe6:101
    init https://www.gmpe.it/libraries/ckeditor5-anchor-drupal/build/anchor-drupal.js?synqe6:101
    promise callback*./packages/ckeditor5-core/src/index.ts/init/m/< https://www.gmpe.it/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=45.2.0:5
    m https://www.gmpe.it/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=45.2.0:5
    init https://www.gmpe.it/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=45.2.0:5
    initPlugins https://www.gmpe.it/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=45.2.0:5
    create https://www.gmpe.it/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=45.2.0:4
    create https://www.gmpe.it/core/assets/vendor/ckeditor5/editor-classic/editor-classic.js?v=45.2.0:4
    attach https://www.gmpe.it/core/modules/ckeditor5/js/ckeditor5.js?synqe6:373
    editorAttach https://www.gmpe.it/core/modules/editor/js/editor.js?v=11.2.2:304
    attach https://www.gmpe.it/core/modules/editor/js/editor.js?v=11.2.2:228
    attach https://www.gmpe.it/core/modules/editor/js/editor.js?v=11.2.2:211
    attachBehaviors https://www.gmpe.it/core/misc/drupal.js?v=11.2.2:166
    attachBehaviors https://www.gmpe.it/core/misc/drupal.js?v=11.2.2:162
    <anonymous> https://www.gmpe.it/core/misc/drupal.init.js?v=11.2.2:32
    listener https://www.gmpe.it/core/misc/drupal.init.js?v=11.2.2:20
    domReady https://www.gmpe.it/core/misc/drupal.init.js?v=11.2.2:26
    <anonymous> https://www.gmpe.it/core/misc/drupal.init.js?v=11.2.2:31
    <anonymous> https://www.gmpe.it/core/misc/drupal.init.js?v=11.2.2:34
ckeditor5.js:467:19

Thanks and best regards

Hello,

*For point one, this is good.

*For point two, the screenshot shows a request for: https://www.gmpe.it/libraries/dom_purify/dist/purify.min.js
while the site itself is requesting: https://www.gmpe.it/libraries/dompurify/dist/purify.min.js
I’m not sure which page the screenshot was taken from, but please ensure this file is correctly loaded wherever it is needed.

*For point three, I’m also not certain which page this refers to, but it appears that: https://www.gmpe.it/themes/custom/gmpe/css/ckeditor.css does not exist. This missing file may be causing the missing icon and the related error.

Please check that this CSS file is present or remove the reference if it’s not needed, as it may resolve the CKEditor issue.

Best wishes,
Alaa

The problem is not with the theme, but with the Advanced Image Editor module. If I uninstall it, the toolbar reappears.

Thanks for everything and best regards

https://www.drupal.org/project/editor_advanced_image/issues/3530984 🐛 Update to CK Editor 45 in Drupal 10.5 Causing Editor Ribbon to Disappear Active

This is still an open issue in the editor_advanced_image project. Just don't use it until the issue is resolved and tested.

It's not the only module. All modules linked with CKEditor have problems.