Load Javascript code within iframe of Article edit

Question

I am trying to enhance a module CKEditor Responsive Plugin. I am basically looking to make the adjacent divs of equal heights by running a javascript code, this is the code:

/* From: https://codepen.io/micahgodbolt/pen/FgqLc */
/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

(function ($) {
 equalheight = function(container){

 var currentTallest = 0,
 currentRowStart = 0,
 rowDivs = new Array(),
 $el,
 topPosition = 0;
 $(container).each(function() {

                   $el = $(this);
                   $($el).height('auto')
                   topPostion = $el.position().top;

                   if (currentRowStart != topPostion) {
                   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                   rowDivs[currentDiv].height(currentTallest);
                   }
                   rowDivs.length = 0; // empty the array
                   currentRowStart = topPostion;
                   currentTallest = $el.height();
                   rowDivs.push($el);
                   } else {
                   rowDivs.push($el);
                   currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
                   }
                   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                   rowDivs[currentDiv].height(currentTallest);
                   }
                   });
 }

 $(document).load(function() {
                  equalheight('.equal_heights');
                  });

 $(window).resize(function(){
                  equalheight('.equal_heights');
                  });
})(jQuery);

I am loading this into the module using the following line:

// Raj:
  drupal_add_js(drupal_get_path('module', 'ckeditor_responsive_plugin') . '/js/equal_heights.js');

in the .module file ckeditor_responsive_plugin.module:

<?php
/**
 * @file
 * Hooks implementations.
 */

/**
 * Add the basepath to the Drupal.settings js object.
 * Implements hook_page_build().
 *
 * @param array $page
 *    Page array.
 */
function ckeditor_responsive_plugin_page_build(array &$page) {

  $module_base_path = url( drupal_get_path('module', 'ckeditor_responsive_plugin'),
    array(
      'absolute'=>true,
    )
  );

  $my_settings = array(
    'basePath' => $module_base_path,
  );
  drupal_add_js(array('ckeditor_responsive_plugin' => $my_settings), 'setting');

// Raj:
  drupal_add_js(drupal_get_path('module', 'ckeditor_responsive_plugin') . '/js/equal_heights.js');
}

/**
 * Define the CKEditor plugin.
 * Implements hook_ckeditor_plugin().
 *
 * @return array
 *   CKEditor settings.
 */
function ckeditor_responsive_plugin_ckeditor_plugin() {
  return array(
    'responsivness' => array(
      'name' => 'responsivness',
      'desc' => t('CKEditor Responsive Plugin : Allow to insert responsive areas'),
      'path' => drupal_get_path('module', 'ckeditor_responsive_plugin') . '/responsivness/',
      'buttons' => array(
        'responsivness' => array(
          'icon' => 'images/responsivness.png',
          'label' => t('Add responsive area'),
        ),
      ),
    ),
  );
}

Everything is working in the article view, however, when I "edit" the article, the article contents are loaded into iframe and that is where things start breaking.

Live article view: equal_heights is the class on which the height is explicitly set by javascript.

Now, when user tries to edit it, the whole article related HTML is loaded as an iframe and as a result, I think, the javascript is not able to get the elements within the iframe. This is what is happening:

I have set a red background for the equal_heights divs to show the difference in both mode.

I suspect that there has to be a hook like:

function ckeditor_responsive_plugin_page_build(array &$page)

which will help me load the javascript for edit mode, but I am not able to figure it out.

Looking forward for some help and advices.

Answer 1

Your JS code needs to access the CKEDITOR iframe. How?

// some code to grab the element with the CKEditor iframe
// [0] is use to get the element, not the jQuery wrapper...
var CKEDITORiframeDOM = jQuery('.cke_contents iframe')[0].contentDocument

With CKEDITORiframeDOM you can access all the elements on the iframe... and use jQuery too.

var $CKEDITORiframe = jQuery(CKEDITORiframeDOM);  

Now to find an element in your iframe is simple...

console.log($CKEDITORiframe.find('p').text());

Finally you need to write a bit of JS code in order to make your script work also with the elements inside the iframe.

Hope that helps!

PD: In some browsers you will need to use document instead of contentDocument.

PD2: Want more info about iframe access with JS? See https://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript