CKEditor 5 Compatibility

Created on 20 November 2022, over 1 year ago
Updated 17 November 2023, 7 months ago

This module provides an integration layer of a standalone CKEditor 4 plugin. As of this writing, there is no CKEditor 5 equivalent plugin, and nothing in the issue queue indicates work is underway or even planned. As such, there are 3 possible courses of action:

Options

1. Create an in-house CKEditor 5 plugin from the ground up.
2. Switch to using https://www.drupal.org/project/ckeditor5_embedded_content (which would require creating a plugin implementation that renders a div).
3. Approximate the functionality by using CKEditor's "Source" mode + the "Styles" dropdown.

1. In-house plugin

The only option for true feature equivalence would be to create a in-house CKEditor 5 plugin. There are some good models in CKEditor 5 documentation for this:

1. The "Abbreviation Plugin" tutorial provides an example of a toolbar item that provides a balloon for user input and inserts HTML. Demo here: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/plugins/abbr...
2. The "Block widget" tutorial demonstrates inserting more predefined HTML. Demo here: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/im...

2. Replacement: CKEditor5 Embedded Content

https://www.drupal.org/project/ckeditor5_embedded_content

3. Approximated functionality

For others coming here, this Drupal module's functionality could be approximated without a dedicated plugin by having content editors insert a plain div tag using the CKEditor "source" mode, and then using the "Styles" dropdown to apply a predefined CSS class to that div.

Note that CKEditor 5 compatibility should be considered distinct from Drupal 10 compatibility, which is a separate issue ( 🌱 Create new version to D10 Closed: duplicate ), and can be completed on its own, with the caveat being that sites would need to use the contrib-provided CKEditor 4 module with Drupal 10: https://www.drupal.org/project/ckeditor

Feature request
Status

Fixed

Version

2.1

Component

Code

Created by

🇭🇺Hungary kepesv

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

Comments & Activities

Not all content is available!

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

  • 🇺🇸United States mark_fullmer Tucson
  • First commit to issue fork.
  • @foxy-vikvik opened merge request.
  • 🇺🇸United States mark_fullmer Tucson

    It looks like the latest commit to the MR is a partial, but incomplete rework of the example plugin in https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/implement... ?

    Beyond the fact that the code itself looks like it's still got placeholder content, I'm getting a JS error when attempting to test (tested with Drupal 10.0.x and 10.1.x, which support different versions of CKEditor 5):

    Uncaught TypeError: Cannot read properties of undefined (reading 'maxOffset')
        at zo._createAt (ckeditor5-dll.js?v=37.1.0:5:215958)
        at er.insert (ckeditor5-dll.js?v=37.1.0:5:358053)
        at er.append (ckeditor5-dll.js?v=37.1.0:5:358971)
        at divManagerPlugin.js?ruwzkh:1:1177
    

    That said, this *does* successfully register the plugin within Drupal, and it can be placed in the toolbar of a CKEditor instance!

    Could you provide more information about the state of the merge request right now and plans for completion?

  • 🇺🇦Ukraine Foxy-vikvik

    @mark_fullmer still working on it. The structure was changed.
    If you have any suggestion Could you please add it here.

  • Status changed to Needs review about 1 year ago
  • 🇺🇸United States loopy1492

    This needs to be rebased with 2.1 for Drupal 10 compatibility.

  • @loopy1492 opened merge request.
  • 🇺🇸United States loopy1492

    I am not sure why none of the 2.1.0 patches are working. I just downgraded to 2.0 and added this module to drupal-lenient for now.

  • 🇺🇸United States loopy1492

    I really want to help out here, but I need a 2.1.x-dev branch I can point to on drupal.org. All the patches fail against 2.1.0 because there's stuff in 2.1.x which we have to compare to in the MR.

  • 🇺🇸United States loopy1492

    I managed to get this running by using the old method of setting gitlab as a repository in composer and referencing my branch.

    So, I noticed that this project still has the old ckeditor 4 module as a dependency and I wondered where that was coming from. It looks like this is still a dependency:

    https://www.drupal.org/project/ckeditor_libraries_group
    https://github.com/drupal-ckeditor-libraries-group/div

    Who knows if this would still work or if it will ever be updated or even if it is needed anymore.

  • Status changed to Needs work 12 months ago
  • 🇨🇿Czech Republic milos.kroulik

    It looks like the MR is basically working, but when the inserted div is edited again, class (and possibly other attributes which I haven't tested) are missing. When editing existing div, the UI appears only on button click, which is different from other similar modules, which generally use contextual menu above the respective element (but this is a small issue, I would say).

  • First commit to issue fork.
  • Status changed to Fixed 11 months ago
  • 🇨🇦Canada smulvih2 Canada 🍁

    Thanks everyone for all the effort to get this going. I tested the MR with CKE5 and it works pretty well. We do need to look at allowing the dialog to be called when interacting with an existing div, so users are not forced to use the Source button. I created a 3.0.0-alpha1 release with changes from MR#4. I'm going to mark this ticket as Fixed since it works with CKE5, and open new tickets for any changes that are needed.

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

  • Status changed to Fixed 8 months ago
  • 🇮🇳India sahilgidwani Jaipur

    Can anyone help me here with how to migrate existing ckeditor div manager from CK4 to CK5 on a existing site.

  • 🇦🇺Australia sime Canberra

    Just researching this module and wanted to note that the project page reads like you need to install the cke4 plugin for the 3.x branch.

  • 🇦🇺Australia sime Canberra

    I've opened a new issue for the documentation problem https://www.drupal.org/project/ckeditor_div_manager/issues/3397578 💬 Documentation for cke5 suggestgs cke4 plugin Active

  • 🇺🇸United States brad.bulger

    Is comment 17 above saying that at the moment there is no edit capability, only create? That's how it is working for me.

Production build 0.69.0 2024