undefined - Contrib.social

🐛 | Footnotes | Layout Paragraphs breaks CKEditor dialog, possibly Input Filter aspects of Footnotes

🇬🇧United Kingdom alanoakden

I just want to add a comment in here for anyone still dealing with CKeditor 4 and seeing this issue that may need a fix sooner than moving to CKeditor 5 and applying the patch outlined in this issue 🐛 CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal Needs work (nevertheless, you should really be using CKeditor 5 and indeed I will look to get the project I'm working on to move to this)

It appears CKeditor 4 doesn't have the ui-dialog class at all, this seems pretty essential to make things work (nevermind if you then see the issues mentioned above)

In my case, i found simply adding `ui-dialog` as a class to the div that also has `cke_reset_all cke_dialog_container` classes already, made all functionality click into gear and work as expected.

I have a custom admin subtheme theme added to the project, i did a pre-process hook in the .theme file to add a library on the relevant content type node-edit pages

function MY_THEME_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'node_layout_page_edit_form'){
       $form['#attached']['library'][] = 'MY_THEME/ckEditorInteractivity';
    }
  }

And then wrote JS similar to this (couldn't see a way to add the class via patch or similar).

/**
 * @file
 * MY THEME behaviors.
 */
(function (Drupal) {

  'use strict';

  Drupal.behaviors.myTheme = {
    attach (context, settings) {
      /** TEMPORARY JS (until CKEditor5 is implemented) that only runs on layout page nodes.
       * This ensures that ckEditor modals are clickable and can be interacted with on layout page nodes.
       * This will observe the DOM and add a class to the CKEditor dialog window once the editor window
       * itself is added to the DOM. */
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                // element added to DOM
                let hasClass = [].some.call(mutation.addedNodes, function(el) {
                    return el.classList.contains('cke_dialog_container');
                });
                if (hasClass) {
                  let ckEditorDialogueWindows = document.getElementsByClassName("cke_dialog_container");
                  for (const window of ckEditorDialogueWindows) {
                    window.classList.add('ui-dialog');
                  };

                }
            }
        });
    });

    var config = {
        attributes: true,
        childList: true,
        characterData: true
    };

    observer.observe(document.body, config);
    }
  };

} (Drupal));

This JS observes the page and once CKeditor inserts its dialog divs, it adds the 'ui-dialog' class

Of course, don't forget to add the JS file reference in your subtheme libraries file

ckEditorInteractivity:
  js:
    js/ckEditorAddDialogClass.js: {}

🐛 | Drupal core | CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal

Comment about 2 months ago →