Document in ckeditor5.api.php how to access the CKEditor 5 instance given a DOM element

Created on 20 September 2023, over 1 year ago
Updated 3 March 2024, 10 months ago

Problem/Motivation

Since CKEditor 5, the global CKEDITOR.instances have been deprecated.
In the new CKEditor5 integration in drupal, a new map is created, Drupal.CKEditor5Instances.
However, this is mapped with numeric IDs which is really not that useful for finding the relevant editor instances.
The old map (CKEDITOR.instances) was mapped by field id, and I honestly think that is generally more useable.

Steps to reproduce

Proposed resolution

I would suggest that this map is keyed with editor.sourceElement.id instead, to have migration be less painful.

Remaining tasks

Map Drupal.CKEditor5Instances by editor.sourceElement.id.

User interface changes

None.

API changes

As described.

Data model changes

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component
CKEditor 5 

Last updated 3 days ago

Created by

🇩🇰Denmark EJTH

Live updates comments and jobs are added and updated live.
  • JavaScript

    Affects the content, performance, or handling of Javascript.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

  • Issue created by @EJTH
  • Status changed to Postponed: needs info over 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Quoting code from ckeditor5.js:

        const editor = Drupal.CKEditor5Instances.get(
          element.getAttribute('data-ckeditor5-id'),
        );
    

    Why is that not adequate?

  • 🇩🇰Denmark EJTH

    I mean sure its adequate, its also trivial to recreate the old map with a single line of code. I just personally don't see how generating unique ID's using Math.random() is a particular useful "improvement", was this map intended to aid in migration from CKE4? In that case I find this scheme of generating random IDs strange, if that was not the intend behind the map, then what was the intention?

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    No idea!

    But you can find out the same way I can: through git archeology of the commit history at https://www.drupal.org/project/ckeditor5 !

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺
  • 🇧🇷Brazil edmargomes

    Example for work today:

    let id = $('#edit-container-body-value').attr('data-ckeditor5-id');
    Drupal.CKEditor5Instances.get(id).setData(email_content);
    

    you can create a utils like this:

    const ckeditorInstanceByElement = (elementId) => {
      let id = $(elementId).attr('data-ckeditor5-id');
      return Drupal.CKEditor5Instances.get(id);
    };
    
  • Status changed to Active 10 months ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    #7: yep! That's similar to what I wrote at #3. How about this: let's add this explicitly to the ckeditor5.api.php documentation for improving discoverability of this.

Production build 0.71.5 2024