sources/plugins/oembed/plugin.js

   1 /**
   2 * oEmbed Plugin plugin
   3 * Licensed under the MIT license
   4 * jQuery Embed Plugin: http://code.google.com/p/jquery-oembed/ (MIT License)
   5 * Plugin for: http://ckeditor.com/license (GPL/LGPL/MPL: http://ckeditor.com/license)
   6 */
   7
   8 (function() {
   9         CKEDITOR.plugins.add('oembed', {
  10             icons: 'oembed',
  11             hidpi: true,
  12             requires: 'widget,dialog',
  13             lang: 'de,en,fr,nl,pl,pt-br,ru,tr', // %REMOVE_LINE_CORE%
  14             version: 1.17,
  15             init: function(editor) {
  16                 // Load jquery?
  17                 loadjQueryLibaries();
  18
  19                 CKEDITOR.tools.extend(CKEDITOR.editor.prototype, {
  20                     oEmbed: function(url, maxWidth, maxHeight, responsiveResize) {
  21
  22                         if (url.length < 1 || url.indexOf('http') < 0) {
  23                             alert(editor.lang.oembed.invalidUrl);
  24                             return false;
  25                         }
  26
  27                         function embed() {
  28                             if (maxWidth == null || maxWidth == 'undefined') {
  29                                 maxWidth = null;
  30                             }
  31
  32                             if (maxHeight == null || maxHeight == 'undefined') {
  33                                 maxHeight = null;
  34                             }
  35
  36                             if (responsiveResize == null || responsiveResize == 'undefined') {
  37                                 responsiveResize = false;
  38                             }
  39
  40                             embedCode(url, editor, false, maxWidth, maxHeight, responsiveResize);
  41                         }
  42
  43                         if (typeof(jQuery.fn.oembed) === 'undefined') {
  44                             CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'), function() {
  45                                 embed();
  46                             });
  47                         } else {
  48                             embed();
  49                         }
  50
  51                         return true;
  52                     }
  53                 });
  54
  55                 editor.widgets.add('oembed', {
  56                     draggable: false,
  57                     mask: true,
  58                     dialog: 'oembed',
  59                     allowedContent: {
  60                         div: {
  61                             styles: 'text-align,float',
  62                             attributes: '*',
  63                             classes: editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent"
  64                         },
  65                         'div(embeddedContent,oembed-provider-*) iframe': {
  66                             attributes: '*'
  67                         },
  68                         'div(embeddedContent,oembed-provider-*) blockquote': {
  69                             attributes: '*'
  70                         },
  71                         'div(embeddedContent,oembed-provider-*) script': {
  72                             attributes: '*'
  73                         }
  74                     },
  75                     template:
  76                         '<div class="' + (editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent") + '">' +
  77                             '</div>',
  78                     upcast: function(element) {
  79                         return element.name == 'div' && element.hasClass(editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent");
  80                     },
  81                     init: function() {
  82                         var data = {
  83                             oembed: this.element.data('oembed') || '',
  84                             resizeType: this.element.data('resizeType') || 'noresize',
  85                             maxWidth: this.element.data('maxWidth') || 560,
  86                             maxHeight: this.element.data('maxHeight') || 315,
  87                             align: this.element.data('align') || 'none',
  88                             oembed_provider: this.element.data('oembed_provider') || ''
  89                         };
  90
  91                         this.setData(data);
  92                         this.element.addClass('oembed-provider-' + data.oembed_provider);
  93
  94                         this.on('dialog', function(evt) {
  95                             evt.data.widget = this;
  96                         }, this);
  97                     }
  98                 });
  99
 100                 editor.ui.addButton('oembed', {
 101                     label: editor.lang.oembed.button,
 102                     command: 'oembed',
 103                     toolbar: 'insert,10',
 104                     icon: this.path + "icons/" + (CKEDITOR.env.hidpi ? "hidpi/" : "") + "oembed.png"
 105                 });
 106
 107                 var resizeTypeChanged = function() {
 108                     var dialog = this.getDialog(),
 109                         resizetype = this.getValue(),
 110                         maxSizeBox = dialog.getContentElement('general', 'maxSizeBox').getElement(),
 111                         sizeBox = dialog.getContentElement('general', 'sizeBox').getElement();
 112
 113                     if (resizetype == 'noresize') {
 114                         maxSizeBox.hide();
 115
 116                         sizeBox.hide();
 117                     } else if (resizetype == "custom") {
 118                         maxSizeBox.hide();
 119
 120                         sizeBox.show();
 121                     } else {
 122                         maxSizeBox.show();
 123
 124                         sizeBox.hide();
 125                     }
 126
 127                 };
 128
 129                 String.prototype.beginsWith = function(string) {
 130                     return (this.indexOf(string) === 0);
 131                 };
 132
 133                 function loadjQueryLibaries() {
 134                     if (typeof(jQuery) === 'undefined') {
 135                         CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() {
 136                             jQuery.noConflict();
 137                             if (typeof(jQuery.fn.oembed) === 'undefined') {
 138                                 CKEDITOR.scriptLoader.load(
 139                                     CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js')
 140                                 );
 141                             }
 142                         });
 143
 144                     } else if (typeof(jQuery.fn.oembed) === 'undefined') {
 145                         CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'));
 146                     }
 147                 }
 148
 149                 function embedCode(url, instance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget) {
 150                     jQuery('body').oembed(url, {
 151                         onEmbed: function(e) {
 152                             var elementAdded = false,
 153                                 provider = jQuery.fn.oembed.getOEmbedProvider(url);
 154
 155                             widget.element.data('resizeType', resizeType);
 156                             if (resizeType == "responsive" || resizeType == "custom") {
 157                                 widget.element.data('maxWidth', maxWidth);
 158                                 widget.element.data('maxHeight', maxHeight);
 159                             }
 160
 161                             widget.element.data('align', align);
 162
 163                             // TODO handle align
 164                             if (align == 'center') {
 165                                 if (!widget.inline)
 166                                     widget.element.setStyle('text-align', 'center');
 167
 168                                 widget.element.removeStyle('float');
 169                             } else {
 170                                 if (!widget.inline)
 171                                     widget.element.removeStyle('text-align');
 172
 173                                 if (align == 'none')
 174                                     widget.element.removeStyle('float');
 175                                 else
 176                                     widget.element.setStyle('float', align);
 177                             }
 178
 179                             if (typeof e.code === 'string') {
 180                                 if (widget.element.$.firstChild) {
 181                                     widget.element.$.removeChild(widget.element.$.firstChild);
 182                                 }
 183
 184                                 widget.element.appendHtml(e.code);
 185                                 widget.element.data('oembed', url);
 186                                 widget.element.data('oembed_provider', provider.name);
 187                                 widget.element.addClass('oembed-provider-' + provider.name);
 188
 189                                 elementAdded = true;
 190                             } else if (typeof e.code[0].outerHTML === 'string') {
 191
 192                                 if (widget.element.$.firstChild) {
 193                                     widget.element.$.removeChild(widget.element.$.firstChild);
 194                                 }
 195
 196                                 widget.element.appendHtml(e.code[0].outerHTML);
 197                                 widget.element.data('oembed', url);
 198                                 widget.element.data('oembed_provider', provider.name);
 199                                 widget.element.addClass('oembed-provider-' + provider.name);
 200
 201                                 elementAdded = true;
 202                             } else {
 203                                 alert(editor.lang.oembed.noEmbedCode);
 204                             }
 205                         },
 206                         onError: function(externalUrl) {
 207                             if (externalUrl.indexOf("vimeo.com") > 0) {
 208                                 alert(editor.lang.oembed.noVimeo);
 209                             } else {
 210                                 alert(editor.lang.oembed.Error);
 211                             }
 212
 213                         },
 214                         maxHeight: maxHeight,
 215                         maxWidth: maxWidth,
 216                         useResponsiveResize: responsiveResize,
 217                         embedMethod: 'editor'
 218                     });
 219                 }
 220
 221                 CKEDITOR.dialog.add('oembed', function(editor) {
 222                     return {
 223                         title: editor.lang.oembed.title,
 224                         minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 568 : 550,
 225                         minHeight: 155,
 226                         onShow: function() {
 227                             var data = {
 228                                 oembed: this.widget.element.data('oembed') || '',
 229                                 resizeType: this.widget.element.data('resizeType') || 'noresize',
 230                                 maxWidth: this.widget.element.data('maxWidth'),
 231                                 maxHeight: this.widget.element.data('maxHeight'),
 232                                 align: this.widget.element.data('align') || 'none'
 233                             };
 234
 235                             this.widget.setData(data);
 236
 237                             this.getContentElement('general', 'resizeType').setValue(data.resizeType);
 238
 239                             this.getContentElement('general', 'align').setValue(data.align);
 240
 241                             var resizetype = this.getContentElement('general', 'resizeType').getValue(),
 242                                 maxSizeBox = this.getContentElement('general', 'maxSizeBox').getElement(),
 243                                 sizeBox = this.getContentElement('general', 'sizeBox').getElement();
 244
 245                             if (resizetype == 'noresize') {
 246                                 maxSizeBox.hide();
 247                                 sizeBox.hide();
 248                             } else if (resizetype == "custom") {
 249                                 maxSizeBox.hide();
 250
 251                                 sizeBox.show();
 252                             } else {
 253                                 maxSizeBox.show();
 254
 255                                 sizeBox.hide();
 256                             }
 257                         },
 258
 259                         onOk: function() {
 260                         },
 261                         contents: [
 262                             {
 263                                 label: editor.lang.common.generalTab,
 264                                 id: 'general',
 265                                 elements: [
 266                                     {
 267                                         type: 'html',
 268                                         id: 'oembedHeader',
 269                                         html: '<div style="white-space:normal;width:500px;padding-bottom:10px">' + editor.lang.oembed.pasteUrl + '</div>'
 270                                     }, {
 271                                         type: 'text',
 272                                         id: 'embedCode',
 273                                         focus: function() {
 274                                             this.getElement().focus();
 275                                         },
 276                                         label: editor.lang.oembed.url,
 277                                         title: editor.lang.oembed.pasteUrl,
 278                                         setup: function(widget) {
 279                                             if (widget.data.oembed) {
 280                                                 this.setValue(widget.data.oembed);
 281                                             }
 282                                         },
 283                                         commit: function(widget) {
 284                                             var dialog = CKEDITOR.dialog.getCurrent(),
 285                                                 inputCode = dialog.getValueOf('general', 'embedCode').replace(/\s/g, ""),
 286                                                 resizeType = dialog.getContentElement('general', 'resizeType').
 287                                                     getValue(),
 288                                                 align = dialog.getContentElement('general', 'align').
 289                                                     getValue(),
 290                                                 maxWidth = null,
 291                                                 maxHeight = null,
 292                                                 responsiveResize = false,
 293                                                 editorInstance = dialog.getParentEditor();
 294
 295                                             if (inputCode.length < 1 || inputCode.indexOf('http') < 0) {
 296                                                 alert(editor.lang.oembed.invalidUrl);
 297                                                 return false;
 298                                             }
 299
 300                                             if (resizeType == "noresize") {
 301                                                 responsiveResize = false;
 302                                                 maxWidth = null;
 303                                                 maxHeight = null;
 304                                             } else if (resizeType == "responsive") {
 305                                                 maxWidth = dialog.getContentElement('general', 'maxWidth').
 306                                                     getInputElement().
 307                                                     getValue();
 308                                                 maxHeight = dialog.getContentElement('general', 'maxHeight').
 309                                                     getInputElement().
 310                                                     getValue();
 311
 312                                                 responsiveResize = true;
 313                                             } else if (resizeType == "custom") {
 314                                                 maxWidth = dialog.getContentElement('general', 'width').
 315                                                     getInputElement().
 316                                                     getValue();
 317                                                 maxHeight = dialog.getContentElement('general', 'height').
 318                                                     getInputElement().
 319                                                     getValue();
 320
 321                                                 responsiveResize = false;
 322                                             }
 323
 324                                             embedCode(inputCode, editorInstance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget);
 325
 326                                             widget.setData('oembed', inputCode);
 327                                             widget.setData('resizeType', resizeType);
 328                                             widget.setData('align', align);
 329                                             widget.setData('maxWidth', maxWidth);
 330                                             widget.setData('maxHeight', maxHeight);
 331                                         }
 332                                     }, {
 333                                         type: 'hbox',
 334                                         widths: ['50%', '50%'],
 335                                         children: [
 336                                             {
 337                                                 id: 'resizeType',
 338                                                 type: 'select',
 339                                                 label: editor.lang.oembed.resizeType,
 340                                                 'default': 'noresize',
 341                                                 setup: function(widget) {
 342                                                     if (widget.data.resizeType) {
 343                                                         this.setValue(widget.data.resizeType);
 344                                                     }
 345                                                 },
 346                                                 items: [
 347                                                     [editor.lang.oembed.noresize, 'noresize'],
 348                                                     [editor.lang.oembed.responsive, 'responsive'],
 349                                                     [editor.lang.oembed.custom, 'custom']
 350                                                 ],
 351                                                 onChange: resizeTypeChanged
 352                                             }, {
 353                                                 type: 'hbox',
 354                                                 id: 'maxSizeBox',
 355                                                 widths: ['120px', '120px'],
 356                                                 style: 'float:left;position:absolute;left:58%;width:200px',
 357                                                 children: [
 358                                                     {
 359                                                         type: 'text',
 360                                                         width: '100px',
 361                                                         id: 'maxWidth',
 362                                                         'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',
 363                                                         label: editor.lang.oembed.maxWidth,
 364                                                         title: editor.lang.oembed.maxWidthTitle,
 365                                                         setup: function(widget) {
 366                                                             if (widget.data.maxWidth) {
 367                                                                 this.setValue(widget.data.maxWidth);
 368                                                             }
 369                                                         }
 370                                                     }, {
 371                                                         type: 'text',
 372                                                         id: 'maxHeight',
 373                                                         width: '120px',
 374                                                         'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',
 375                                                         label: editor.lang.oembed.maxHeight,
 376                                                         title: editor.lang.oembed.maxHeightTitle,
 377                                                         setup: function(widget) {
 378                                                             if (widget.data.maxHeight) {
 379                                                                 this.setValue(widget.data.maxHeight);
 380                                                             }
 381                                                         }
 382                                                     }
 383                                                 ]
 384                                             }, {
 385                                                 type: 'hbox',
 386                                                 id: 'sizeBox',
 387                                                 widths: ['120px', '120px'],
 388                                                 style: 'float:left;position:absolute;left:58%;width:200px',
 389                                                 children: [
 390                                                     {
 391                                                         type: 'text',
 392                                                         id: 'width',
 393                                                         width: '100px',
 394                                                         'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',
 395                                                         label: editor.lang.oembed.width,
 396                                                         title: editor.lang.oembed.widthTitle,
 397                                                         setup: function(widget) {
 398                                                             if (widget.data.maxWidth) {
 399                                                                 this.setValue(widget.data.maxWidth);
 400                                                             }
 401                                                         }
 402                                                     }, {
 403                                                         type: 'text',
 404                                                         id: 'height',
 405                                                         width: '120px',
 406                                                         'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',
 407                                                         label: editor.lang.oembed.height,
 408                                                         title: editor.lang.oembed.heightTitle,
 409                                                         setup: function(widget) {
 410                                                             if (widget.data.maxHeight) {
 411                                                                 this.setValue(widget.data.maxHeight);
 412                                                             }
 413                                                         }
 414                                                     }
 415                                                 ]
 416                                             }
 417                                         ]
 418                                     }, {
 419                                         type: 'hbox',
 420                                         id: 'alignment',
 421                                         children: [
 422                                             {
 423                                                 id: 'align',
 424                                                 type: 'radio',
 425                                                 items: [
 426                                                     [editor.lang.oembed.none, 'none'],
 427                                                     [editor.lang.common.alignLeft, 'left'],
 428                                                     [editor.lang.common.alignCenter, 'center'],
 429                                                     [editor.lang.common.alignRight, 'right']
 430                                                 ],
 431                                                 label: editor.lang.common.align,
 432                                                 setup: function(widget) {
 433                                                     this.setValue(widget.data.align);
 434                                                 }
 435                                             }
 436                                         ]
 437                                     }
 438                                 ]
 439                             }
 440                         ]
 441                     };
 442                 });
 443             }
 444         });
 445     }
 446 )();