Add support for CKEditor 5

I asked the CKEditor 5 team what they recommend. They said:

no intentions to work on it, someone needs to write a custom plugin for CKE5 to deliver an equivalent, a kind of a plugin that maaaybe could be replaced by more generic https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html

Just following up about what the plan is going forward?

Could we maybe get a beta release for D10 with the old plugin while the ckeditor5 plugin is being worked on?

I have used https://www.drupal.org/project/ckeditor_html_embed after removing the php 8.0 requirement and it suits our iframe embed needs, just make sure you have allowed iframe under "Ckeditor5 plugin settings" > "Source editing", on the "Text formats and editors" > "Configure" page.

The module uses the ckeditor5 html-embed plugin.

For one client we had Media to support iframe embeds, but some legacy migrated content still had iframes directly in the html source. Switching to CKE5 stripped out the iframes. What we did is created a file like:

mymodule.ckeditor5.yml

mymodule_ckeditor5_arbitraryHtmlSupport:
  ckeditor5:
    plugins: [htmlSupport.GeneralHtmlSupport]
    config:
      htmlSupport:
        allow:
          -
            name:
              regexp:
                pattern: /.*/
            attributes: true
            classes: true
            styles: true
  drupal:
    label: Arbitrary HTML support
    elements:
      - <iframe>
      - <iframe style src title width height frameborder scrolling allow allowfullscreen loading name sandbox>
    library: core/ckeditor5.htmlSupport
    # @see \Drupal\ckeditor5\Plugin\CKEditor5PluginManagerInterface::getEnabledDefinitions()
    conditions: []

This is identical to one entry in the ckeditor5.ckeditor5.yml in core with the <iframe> and <iframe style ... etc> lines added within elements:.

After a cache clear, this automatically adds <iframe src title width height frameborder scrolling allow allowfullscreen loading name sandbox> to the allowed_html and the iframe remains.

We then instructed the client that if they wish to change the iframe, they should remove it and use the Media embedding options (in this case, the vast majority being covered by oembed).

Hope this helps someone else.

Note that I have not considered whether this might have security implications if you have untrusted users who might be adding untrusted iframe embeds.

The yml file solution worked perfectly. Thank you.

Created the D10 & CKEditor 5 compatible version.

Hi @o_tymoshchuk.
I checked your changes. Everything works fine.

Tested MR but it doesn't seem to be saving any of the values after save

Sorry let me give better steps

Added button to ckeditor toolbar
Cleared cached
Verified button appears
Verified form appears
Inputting values seem to try and do something, Was using ESPN so might off been blocked
Clicked save
See the space of the iframe
Go back to edit.
Clicking edit iframe all the values previously there are missing.

Added a commit to populate the form's field with existing values.

attaching static patch for composer

I have tested the functionality on my D10 setup and found this patch to be working as expected. The field values are getting populated with the values previously saved. Hence, marking the same as RTBC.

Can confirm this works

Hello,

After all these changes I still have a JS error in my editor while using the IFrameEmbed
"TypeError: Cannot destructure property 'parent' of 'e.getFirstPosition(...)' as it is null."

Can someone help me fix this issue ?

Added a commit to disable the button in source editing mode

The old CKE4 plugin would automatically adjust its UI so only attributes that were supported by the text filter were shown as available. I made changes to the CKE5 merge request to support something similar. Now there is a config form in the filter settings, allowing you to toggle which attributes should be available. This will sync with Drupal's allowed html filter format as well.

I haven't done a ton of testing with this yet, but it seems to be in a pretty good state. I think it makes sense to put this in a new 3.x branch. Should be able to support both the CKE4 and CKE5 plugins at the same time though. I'll work on that.

Since I don't anticipate there being a ton of activity here, and since I suspect people will be eager to try this out, I'm going to commit this MR to the new 3.0.x branch and perhaps put out an alpha release of it. We can handle further fixes in a new issue and MR.

Thank you all for helping, especially o_timoshchuk and el7cosmos

Thanks for fixing this, no more fakeobjects or ckeditr(4) needed!
Another step closer to getting sites working on D11!