Contrib.social

Support concurrent use of CKEditor 4 and 5

Open on Drupal.org →
Created on 30 October 2024, 9 months ago

Problem/Motivation

As soon as you upgrade to the 3.x branch, CKEditor 4 will break on any content that contains anchor links with the js error:

Uncaught TypeError: editor.createFakeParserElement is not a function

This is problematic if you wish to test with both editors to ensure a smooth transition, or if you want to retain CKEditor 4 for a while should you need to fall back for some reason.

During the (excellent) work to create the 3.x branch, the decision was made to drop support for CKEditor 4 📌 Start a 3.0.x branch for CKEditor Anchor Link for semantic versioning and better integration with Drupal 10, CKEditor 5, and LinkIt Fixed , but functionality can be restored with some minor tweaks to the current 3.x code.

Steps to reproduce

  1. Update anchor_links to the 3.x branch
  2. Edit a content item that is still using CKEditor 4 and contains anchor links -OR- create a new content item that uses CKE4 and attempt to add an anchor link.

The error above should appear in the browser console.

(If you're updating from the 8.x-2.x branch, you might also note that composer has removed the CKEditor FakeObjects module even though Drupal will still think it's installed.)

Proposed resolution

  1. Restore the fakeobjects dependency, or manually require it in your project during the transition.
  2. Add the dependency back the Anchor plugin.
  3. Consider adding name attribute back to rendered content for true backward compatibility.

Regarding #3: The plugin currently upcasts anchors with name attributes, but does not include the name attribute in the resulting page source (See: ✨ Support the "name" attribute for backwards compatibility Active ). As a result, anchor links that have been edited in CKEditor 5 will no longer be present if the text format is switched back to one using CKEditor 4.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ➖ Testing to ensure no regression
  • ➖ Code review by maintainers
  • ➖ Merge
  • ❌ Release

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

🇺🇸United States justcaldwell Austin, Texas

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

Merge Requests

Comments & Activities

  • Issue created by @justcaldwell
  • Comment 9 months ago →
    🇺🇸United States justcaldwell Austin, Texas

    I'm attaching a patch with the necessary changes. I'll open an issue branch/MR soon.

    I opted to not reintroduce the hard dependency on the CKEditor FakeObjects → module now, but to use these changes you would need to include it in your project:

    composer require 'drupal/fakeobjects:^1.2'

    As I said above, this is probably a good idea anyway if you're updating from 8.x-2.x, as composer may well remove the module (if it's not required elsewhere) without uninstalling it. FakeObjects can be uninstalled and removed when it's no longer needed.

    The patch also corrects broken paths to the CKEditor 4 toolbar icons.

  • Merge request !13Allow concurrent use of ckeditor 4 and ckeditor5 → (Open) created by justcaldwell
  • Comment 9 months ago →
    🇺🇸United States justcaldwell Austin, Texas

    MR created as promised 🙂

  • Status changed to Needs work about 18 hours ago
  • Comment about 18 hours ago →
    🇦🇺Australia marc.groth

    Thanks for your work on this @justcaldwell!

    Unfortunately I'm able to get this working. After updating (details below) I get the following error in the console (when the page loads; the WYSIWYG is missing completely):

    Uncaught ReferenceError: baseStyle is not defined
    at Object.onLoad (plugin.js?t=szd8cy:22:21)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager.<anonymous> (ckeditor.js?v=4.18.0:255:260)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager.<anonymous> (ckeditor.js?v=4.18.0:254:32)
    at n (ckeditor.js?v=4.18.0:248:455)
    at Array.v (ckeditor.js?v=4.18.0:249:93)
    at x (ckeditor.js?v=4.18.0:249:177)
    at ckeditor.js?v=4.18.0:250:131
onLoad @ plugin.js?t=szd8cy:22
(anonymous) @ ckeditor.js?v=4.18.0:255
(anonymous) @ ckeditor.js?v=4.18.0:254
n @ ckeditor.js?v=4.18.0:248
v @ ckeditor.js?v=4.18.0:249
x @ ckeditor.js?v=4.18.0:249
(anonymous) @ ckeditor.js?v=4.18.0:250
setTimeout
CKEDITOR.env.ie.d.$.onload @ ckeditor.js?v=4.18.0:250
script
window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.dom.element @ ckeditor.js?v=4.18.0:88
p @ ckeditor.js?v=4.18.0:249
load @ ckeditor.js?v=4.18.0:250
load @ ckeditor.js?v=4.18.0:253
l @ ckeditor.js?v=4.18.0:254
(anonymous) @ ckeditor.js?v=4.18.0:255
n @ ckeditor.js?v=4.18.0:266
(anonymous) @ ckeditor.js?v=4.18.0:265
getStylesSet @ ckeditor.js?v=4.18.0:505
g @ ckeditor.js?v=4.18.0:265
(anonymous) @ ckeditor.js?v=4.18.0:265
h @ ckeditor.js?v=4.18.0:247
n @ ckeditor.js?v=4.18.0:248
v @ ckeditor.js?v=4.18.0:249
x @ ckeditor.js?v=4.18.0:249
(anonymous) @ ckeditor.js?v=4.18.0:250
setTimeout
CKEDITOR.env.ie.d.$.onload @ ckeditor.js?v=4.18.0:250
script
window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.dom.element @ ckeditor.js?v=4.18.0:88
p @ ckeditor.js?v=4.18.0:249
load @ ckeditor.js?v=4.18.0:250
load @ ckeditor.js?v=4.18.0:247
d @ ckeditor.js?v=4.18.0:264
(anonymous) @ ckeditor.js?v=4.18.0:264
f @ ckeditor.js?v=4.18.0:539
loadPart @ ckeditor.js?v=4.18.0:540
c @ ckeditor.js?v=4.18.0:264
(anonymous) @ ckeditor.js?v=4.18.0:264
d @ ckeditor.js?v=4.18.0:10
(anonymous) @ ckeditor.js?v=4.18.0:12
window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js?v=4.18.0:13
fireOnce @ ckeditor.js?v=4.18.0:12
window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fireOnce @ ckeditor.js?v=4.18.0:13
m @ ckeditor.js?v=4.18.0:264
(anonymous) @ ckeditor.js?v=4.18.0:260
(anonymous) @ ckeditor.js?v=4.18.0:28
setTimeout
setTimeout @ ckeditor.js?v=4.18.0:28
b @ ckeditor.js?v=4.18.0:260
b @ ckeditor.js?v=4.18.0:346
CKEDITOR.replace @ ckeditor.js?v=4.18.0:351
attach @ ckeditor.js?v=10.4.6:20
Drupal.editorAttach @ editor.js?v=10.4.6:304
(anonymous) @ editor.js?v=10.4.6:228
attach @ editor.js?v=10.4.6:211
(anonymous) @ drupal.js?v=10.4.6:166
Drupal.attachBehaviors @ drupal.js?v=10.4.6:162
(anonymous) @ drupal.init.js?v=10.4.6:32
listener @ drupal.init.js?v=10.4.6:20Understand this error

    It looks like the issue is in the anchor_link module js itself (/modules/contrib/anchor_link/js/unlink/plugin.js which references baseStyles which apparently no longer exists). It's also referenced in /modules/contrib/anchor_link/js/link/plugin.js

    My setup is as follows:

    Drupal: 10.4.6
    Anchor Link: 3.0.3 (with #3484756 and #3399656 patches applied)
    Fake Objects: 2.0.1

    FWIW: Removing those references seems to fix the issue. Am I missing something or should the patch be updated to include these removals?

  • Comment about 18 hours ago →
    🇦🇺Australia marc.groth

    Attached is an updated patch that includes these removals. The MR on drupalcode will need to be updated to include these changes if this is the correct approach...

  • Comment about 18 hours ago →
    🇦🇺Australia marc.groth

    Sorry, for some reason that patch file was not created correctly. Attached is a version that should.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024