Add support for CKEditor 5

Created on 10 October 2022, about 2 years ago
Updated 3 September 2024, 4 months ago

Problem/Motivation

CKEditor 5 was added to core in 9.3.0. Because ckeditor 5 was a ground-up rewrite all plugins must also be rewritten.

Proposed resolution

When migrating from ckeditor 4 to 5 we should consider using Custom widgets.

We should remove the fakeobject plugin and use Custom Widgets.

๐Ÿ“Œ Task
Status

Fixed

Version

3.0

Component

Code

Created by

๐Ÿ‡ง๐Ÿ‡ชBelgium mpp

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

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡ณ๐Ÿ‡ฟNew Zealand code_brown

    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.

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom scott_euser

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States jpsalter

    The yml file solution worked perfectly. Thank you.

  • ๐Ÿ‡บ๐Ÿ‡ฆUkraine o_timoshchuk

    o_tymoshchuk โ†’ made their first commit to this issueโ€™s fork.

  • Assigned to o_timoshchuk
  • Issue was unassigned.
  • Status changed to Needs review about 1 year ago
  • ๐Ÿ‡บ๐Ÿ‡ฆUkraine o_timoshchuk

    Created the D10 & CKEditor 5 compatible version.

  • Status changed to RTBC about 1 year ago
  • ๐Ÿ‡บ๐Ÿ‡ฆUkraine bobi-mel

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

  • Status changed to Needs work about 1 year ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

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

  • Assigned to o_timoshchuk
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    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.

  • First commit to issue fork.
  • Status changed to Needs review about 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ฉIndonesia el7cosmos ๐Ÿ‡ฎ๐Ÿ‡ฉ GMT+7

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

  • ๐Ÿ‡ฎ๐Ÿ‡ฉIndonesia el7cosmos ๐Ÿ‡ฎ๐Ÿ‡ฉ GMT+7

    attaching static patch for composer

  • Status changed to RTBC about 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sarathkp

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States damondt

    Can confirm this works

  • ๐Ÿ‡ฑ๐Ÿ‡งLebanon ewehbe

    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 ?

  • Status changed to Needs review about 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ฉIndonesia el7cosmos ๐Ÿ‡ฎ๐Ÿ‡ฉ GMT+7

    Added a commit to disable the button in source editing mode

  • First commit to issue fork.
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bkosborne New Jersey, USA

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bkosborne New Jersey, USA
  • Status changed to Fixed about 1 year ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bkosborne New Jersey, USA

    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

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Status changed to Fixed 4 months ago
  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands firfin

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

  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands firfin
Production build 0.71.5 2024