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, 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: #3399656: Support the "name" attribute for backwards compatibility). 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
CommentFileSizeAuthor
#7 anchor_link-support-cke4-3484756-7.patch3.41 KBmarc.groth
#6 anchor_link-support-cke4-3484756-6.patch3.03 KBmarc.groth
#2 anchor_link-support-cke4.patch1.96 KBjustcaldwell

Issue fork anchor_link-3484756

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

justcaldwell created an issue. See original summary.

justcaldwell’s picture

justcaldwell
he/him
Primary language English
Location Austin, Texas
commented
StatusFileSize
new anchor_link-support-cke4.patch1.96 KB

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.

justcaldwell opened merge request !13

justcaldwell’s picture

justcaldwell
he/him
Primary language English
Location Austin, Texas
commented
Status: Active » Needs review

MR created as promised 🙂

marc.groth’s picture

marc.groth commented
Status: Needs review » Needs work

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?

marc.groth’s picture

marc.groth commented
Status: Needs work » Needs review
StatusFileSize
new anchor_link-support-cke4-3484756-6.patch3.03 KB

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...

marc.groth’s picture

marc.groth commented
StatusFileSize
new anchor_link-support-cke4-3484756-7.patch3.41 KB

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

liam morland made their first commit to this issue’s fork.

liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented

@marc.groth the patch in #7 makes more changes than the merge request. It removes baseStyle in four places. Those changes are not in the merge request. Do you know why that is?

The merge request solved this problem for us.

However, I think this should be adding a dependency on fakeobjects to the info and Composer files. ::getDependencies() was removed in commit 1496136 for #3206676: Start a 3.0.x branch for CKEditor Anchor Link for semantic versioning and better integration with Drupal 10, CKEditor 5, and LinkIt and that also removed that dependency.

I don't know if the requires: 'fakeobjects', should be re-added to the plugin.js files.

rajab natshah’s picture

rajab natshah
he/him
commented

3.0.x depends on ckeditor5, and Drupal 10 and up ship no CKEditor 4, so this does not apply on this branch. CKEditor 4 lives on 8.x-2.x.

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Closed (won't fix)

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.