Contrib.social

Support concurrent use of CKEditor 4 and 5

Open on Drupal.org →
Created on 30 October 2024, 23 days 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 23 days 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 22 days ago →
    🇺🇸United States justcaldwell Austin, Texas

    MR created as promised 🙂

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024