- 🇺🇸United States karlshea Minneapolis 🇺🇸
It is actually insane that there's literally no way to tell if the media item is being rendered inside CKEditor.
This does not work:
function mymodule_support_preprocess_media(&$variables) { if (\Drupal::service('router.admin_context')->isAdminRoute()) { // Even inside the editor, the media item isn't in an admin route. } if (\Drupal::routeMatch()->getRouteName() === 'media.filter.preview') { // It's only a preview when you first embed it, but on edit it's just part of the content! } }
This is the ridiculous thing I had to do in order to allow clicking on a media item so you can adjust display mode etc:
function mymodule_support_preprocess_page(&$variables) { if (\Drupal::service('router.admin_context')->isAdminRoute()) { $variables['#attached']['library'][] = 'mymodule_support/ckeditor5_fixes'; } }
document.body.addEventListener('click', (e) => { // Prevent opening colorbox images in the current tab while in the editor. if (e.target.parentElement.classList.contains('colorbox')) { e.preventDefault(); } });
I can't imagine what other media embeds will need to go through to suppress behavior.
- 🇫🇷France mably
In our special use case we add to load some JS after a custom web component was displayed as a media.
We wrote a Javascript MutationObserver to detect the addition to the page of our custom element and load the related javascript library.
Here is an quick and dirty piece of code for those interested:
jQuery(document).ready(function() { // Function to remove specific attribute function initImageComparisonSlider(mutationsList, observer) { mutationsList.forEach(mutation => { // Check if nodes are added if (mutation.type === 'childList') { // Iterate through added nodes mutation.addedNodes.forEach(node => { // Check if the node is an element of type DIV if ((node.nodeType === 1) && (node.tagName === "DIV")) { var article = node.children[0]; // Check if the node is an element of type ARTICLE if (article.tagName === "ARTICLE") { var ics = article.children[1]; // Check if the node is an element of type IMG-COMPARISON-SLIDER if (ics.tagName === "IMG-COMPARISON-SLIDER") { once('ics-js-css', 'body').forEach(function (element) { let scriptEle = document.createElement("script"); scriptEle.setAttribute("src", "https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"); scriptEle.setAttribute("type", "text/javascript"); scriptEle.setAttribute("async", "async"); document.body.appendChild(scriptEle); }); } } } }); } }); } // Create a new MutationObserver const observer = new MutationObserver(initImageComparisonSlider); // Define the target node to observe const targetNode = document.body; // Configuration of the observer const config = { childList: true, subtree: true }; // Start observing the target node for configured mutations observer.observe(targetNode, config); });
We used Asset Injector for our test, script was activated only on
node/*/edit
pages. +1 for this feature. It's a WYSIWYG editor after all, so at least CSS should be rendered when previewing.