[Summary view] [Print] [Text view]

   1  /*
   2  Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
   3  For licensing, see LICENSE.html or http://ckeditor.com/license
   4  */
   5  
   6  /**
   7   * @file Plugin for inserting Drupal embeded media
   8   */
   9  ( function() {
  10    CKEDITOR.plugins.add( 'mediaembed',
  11    {
  12      requires : [ 'fakeobjects', 'htmlwriter' ],
  13      init: function( editor )
  14      {
  15        editor.addCss(
  16          'img.cke_mediaembed' +
  17          '{' +
  18            'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.gif' ) + ');' +
  19            'background-position: center center;' +
  20            'background-repeat: no-repeat;' +
  21            'border: 1px solid #a9a9a9;' +
  22            'width: 80px;' +
  23            'height: 80px;' +
  24          '}'
  25          );
  26        var me = this;
  27        CKEDITOR.dialog.add( 'MediaEmbedDialog', function( editor ) {
  28          return {
  29            title : Drupal.t('Embed Media Dialog'),
  30            minWidth : 400,
  31            minHeight : 200,
  32            contents : [
  33              {
  34                id : 'mediaTab',
  35                label : Drupal.t('Embed media code'),
  36                title : Drupal.t('Embed media code'),
  37                elements :
  38                [
  39                  {
  40                    id : 'embed',
  41                    type : 'textarea',
  42                    rows : 9,
  43                    label : Drupal.t('Paste embed code here')
  44                  }
  45                ]
  46              }
  47            ],
  48            onOk : function() {
  49              var editor = this.getParentEditor();
  50              var content = this.getValueOf( 'mediaTab', 'embed' );
  51              if ( content.length>0 ) {
  52                var realElement = CKEDITOR.dom.element.createFromHtml('<div class="media_embed"></div>');
  53                realElement.setHtml(content);
  54                var fakeElement = editor.createFakeElement( realElement , 'cke_mediaembed', 'div', true);
  55                var matches = content.match(/width=(["']?)(\d+)\1/i);
  56                if (matches && matches.length == 3) {
  57                  fakeElement.setStyle('width', cssifyLength(matches[2]));
  58                }
  59                matches = content.match(/height=([\"\']?)(\d+)\1/i);
  60                if (matches && matches.length == 3) {
  61                  fakeElement.setStyle('height', cssifyLength(matches[2]));
  62                }
  63                editor.insertElement(fakeElement);
  64              }
  65            }
  66          };
  67        });
  68  
  69        editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) );
  70  
  71        editor.ui.addButton( 'MediaEmbed',
  72        {
  73          label: Drupal.t('Embed Media'),
  74          command: 'MediaEmbed',
  75          icon: this.path + 'images/icon.png'
  76        } );
  77      },
  78      afterInit : function( editor )
  79      {
  80        var dataProcessor = editor.dataProcessor,
  81          dataFilter = dataProcessor && dataProcessor.dataFilter,
  82          htmlFilter = dataProcessor && dataProcessor.htmlFilter;
  83  
  84        if ( htmlFilter )
  85        {
  86          htmlFilter.addRules({
  87            elements :
  88            {
  89              'div' : function ( element ) {
  90                if( element.attributes['class'] == 'media_embed' ) {
  91                  for (var x in element.children) {
  92                    if (typeof(element.children[x].attributes) != 'undefined') {
  93                      if (typeof(element.children[x].attributes.width) != undefined) {
  94                        element.children[x].attributes.width = element.attributes.width;
  95                      }
  96                      if (typeof(element.children[x].attributes.height) != undefined) {
  97                        element.children[x].attributes.height = element.attributes.height;
  98                      }
  99                    }
 100                  }
 101                }
 102              }
 103            }
 104          });
 105        }
 106        if ( dataFilter )
 107        {
 108          dataFilter.addRules(
 109            {
 110              elements :
 111              {
 112                'div' : function( element )
 113                {
 114                  var attributes = element.attributes,
 115                    classId = attributes.classid && String( attributes.classid ).toLowerCase();
 116                    
 117                  if (element.attributes[ 'class' ] == 'media_embed') {
 118                    var fakeElement = editor.createFakeParserElement(element, 'cke_mediaembed', 'div', true);
 119                    var fakeStyle = fakeElement.attributes.style || '';
 120                    if (typeof(element.children[0].attributes) != 'undefined') { 
 121                      var height = element.children[0].attributes.height,
 122                        width = element.children[0].attributes.width;
 123                    }
 124                    if ( typeof width != 'undefined' )
 125                      fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + cssifyLength( width ) + ';';
 126                
 127                    if ( typeof height != 'undefined' )
 128                      fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + cssifyLength( height ) + ';';
 129                   
 130                    return fakeElement;  
 131                  }
 132                  return element;
 133                }
 134              }
 135            },
 136            5);
 137        }
 138      }
 139    } );
 140    var numberRegex = /^\d+(?:\.\d+)?$/;
 141    function cssifyLength( length )
 142    {
 143      if ( numberRegex.test( length ) )
 144        return length + 'px';
 145      return length;
 146    }
 147  } )();