web-dev-qa-db-ja.com

記事編集のiframe内にJavascriptコードを読み込む

モジュールを拡張しようとしています CKEditor Responsive Plugin 。基本的には、JavaScriptコードを実行して、隣接するdivの高さを同じにしようとしています。これがコードです。

/* 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);

次の行を使用して、これをモジュールにロードしています。

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

.moduleファイル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'),
        ),
      ),
    ),
  );
}

すべてが記事ビューで機能していますが、記事を「編集」すると、記事のコンテンツがiframeに読み込まれ、そこから問題が発生し始めます。

ライブ記事ビュー： enter image description hereequal_heightsは、高さがjavascriptによって明示的に設定されるクラスです。

これで、ユーザーが編集しようとすると、記事に関連するHTML全体がiframeとして読み込まれ、その結果、JavaScriptがiframe内の要素を取得できないと思います。これが起こっていることです：

enter image description here

両方のモードの違いを示すために、equal_heights divに赤い背景を設定しました。

私は次のようなフックが必要であると思います：

function ckeditor_responsive_plugin_page_build(array &$page)

これは、編集モードでJavaScriptをロードするのに役立ちますが、理解できません。

いくつかのヘルプとアドバイスを楽しみにしています。

7wysiwygthemingjavascript
1
Raj Pawan Gumdal

JSコードはCKEDITOR iframeにアクセスする必要があります。どうやって？

// 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

CKEDITORiframeDOMを使用すると、iframeのすべての要素にアクセスでき、jQueryも使用できます。

var $CKEDITORiframe = jQuery(CKEDITORiframeDOM);

Iframe内の要素を見つけるのは簡単です...

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

最後に、スクリプトをiframe内の要素でも機能させるために、JSコードを少し書く必要があります。

お役に立てば幸いです。

PD：一部のブラウザーでは、contentDocumentの代わりにdocumentを使用する必要があります。

PD2：JSでのiframeアクセスに関する詳細情報が必要ですか？ https://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript を参照してください

1
Beto Aveiga