wp-includes/js/tinymce/plugins/media/plugin.js

   1 /**
   2  * plugin.js
   3  *
   4  * Released under LGPL License.
   5  * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 /*jshint maxlen:255 */
  12 /*eslint max-len:0 */
  13 /*global tinymce:true */
  14
  15 tinymce.PluginManager.add('media', function(editor, url) {
  16         var urlPatterns = [
  17                 {regex: /youtu\.be\/([\w\-.]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$1', allowFullscreen: true},
  18                 {regex: /youtube\.com(.+)v=([^&]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$2', allowFullscreen: true},
  19                 {regex: /vimeo\.com\/([0-9]+)/, type: 'iframe', w: 425, h: 350, url: '//player.vimeo.com/video/$1?title=0&byline=0&portrait=0&color=8dc7dc', allowfullscreen: true},
  20                 {regex: /vimeo\.com\/(.*)\/([0-9]+)/, type: "iframe", w: 425, h: 350, url: "//player.vimeo.com/video/$2?title=0&amp;byline=0", allowfullscreen: true},
  21                 {regex: /maps\.google\.([a-z]{2,3})\/maps\/(.+)msid=(.+)/, type: 'iframe', w: 425, h: 350, url: '//maps.google.com/maps/ms?msid=$2&output=embed"', allowFullscreen: false}
  22         ];
  23
  24         var embedChange = (tinymce.Env.ie && tinymce.Env.ie <= 8) ? 'onChange' : 'onInput';
  25
  26         function guessMime(url) {
  27                 url = url.toLowerCase();
  28
  29                 if (url.indexOf('.mp3') != -1) {
  30                         return 'audio/mpeg';
  31                 }
  32
  33                 if (url.indexOf('.wav') != -1) {
  34                         return 'audio/wav';
  35                 }
  36
  37                 if (url.indexOf('.mp4') != -1) {
  38                         return 'video/mp4';
  39                 }
  40
  41                 if (url.indexOf('.webm') != -1) {
  42                         return 'video/webm';
  43                 }
  44
  45                 if (url.indexOf('.ogg') != -1) {
  46                         return 'video/ogg';
  47                 }
  48
  49                 if (url.indexOf('.swf') != -1) {
  50                         return 'application/x-shockwave-flash';
  51                 }
  52
  53                 return '';
  54         }
  55
  56         function getVideoScriptMatch(src) {
  57                 var prefixes = editor.settings.media_scripts;
  58
  59                 if (prefixes) {
  60                         for (var i = 0; i < prefixes.length; i++) {
  61                                 if (src.indexOf(prefixes[i].filter) !== -1) {
  62                                         return prefixes[i];
  63                                 }
  64                         }
  65                 }
  66         }
  67
  68         function showDialog() {
  69                 var win, width, height, data;
  70
  71                 var generalFormItems = [
  72                         {
  73                                 name: 'source1',
  74                                 type: 'filepicker',
  75                                 filetype: 'media',
  76                                 size: 40,
  77                                 autofocus: true,
  78                                 label: 'Source',
  79                                 onchange: function(e) {
  80                                         tinymce.each(e.meta, function(value, key) {
  81                                                 win.find('#' + key).value(value);
  82                                         });
  83                                 }
  84                         }
  85                 ];
  86
  87                 function recalcSize(e) {
  88                         var widthCtrl, heightCtrl, newWidth, newHeight;
  89
  90                         widthCtrl = win.find('#width')[0];
  91                         heightCtrl = win.find('#height')[0];
  92
  93                         newWidth = widthCtrl.value();
  94                         newHeight = heightCtrl.value();
  95
  96                         if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
  97                                 if (e.control == widthCtrl) {
  98                                         newHeight = Math.round((newWidth / width) * newHeight);
  99
 100                                         if (!isNaN(newHeight)) {
 101                                                 heightCtrl.value(newHeight);
 102                                         }
 103                                 } else {
 104                                         newWidth = Math.round((newHeight / height) * newWidth);
 105
 106                                         if (!isNaN(newWidth)) {
 107                                                 widthCtrl.value(newWidth);
 108                                         }
 109                                 }
 110                         }
 111
 112                         width = newWidth;
 113                         height = newHeight;
 114                 }
 115
 116                 if (editor.settings.media_alt_source !== false) {
 117                         generalFormItems.push({name: 'source2', type: 'filepicker', filetype: 'media', size: 40, label: 'Alternative source'});
 118                 }
 119
 120                 if (editor.settings.media_poster !== false) {
 121                         generalFormItems.push({name: 'poster', type: 'filepicker', filetype: 'image', size: 40, label: 'Poster'});
 122                 }
 123
 124                 if (editor.settings.media_dimensions !== false) {
 125                         generalFormItems.push({
 126                                 type: 'container',
 127                                 label: 'Dimensions',
 128                                 layout: 'flex',
 129                                 align: 'center',
 130                                 spacing: 5,
 131                                 items: [
 132                                         {name: 'width', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Width'},
 133                                         {type: 'label', text: 'x'},
 134                                         {name: 'height', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Height'},
 135                                         {name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'}
 136                                 ]
 137                         });
 138                 }
 139
 140                 data = getData(editor.selection.getNode());
 141                 width = data.width;
 142                 height = data.height;
 143
 144                 var embedTextBox = {
 145                         id: 'mcemediasource',
 146                         type: 'textbox',
 147                         flex: 1,
 148                         name: 'embed',
 149                         value: getSource(),
 150                         multiline: true,
 151                         label: 'Source'
 152                 };
 153
 154                 function updateValueOnChange() {
 155                         data = htmlToData(this.value());
 156                         this.parent().parent().fromJSON(data);
 157                 }
 158
 159                 embedTextBox[embedChange] = updateValueOnChange;
 160
 161                 win = editor.windowManager.open({
 162                         title: 'Insert/edit video',
 163                         data: data,
 164                         bodyType: 'tabpanel',
 165                         body: [
 166                                 {
 167                                         title: 'General',
 168                                         type: "form",
 169                                         onShowTab: function() {
 170                                                 data = htmlToData(this.next().find('#embed').value());
 171                                                 this.fromJSON(data);
 172                                         },
 173                                         items: generalFormItems
 174                                 },
 175
 176                                 {
 177                                         title: 'Embed',
 178                                         type: "container",
 179                                         layout: 'flex',
 180                                         direction: 'column',
 181                                         align: 'stretch',
 182                                         padding: 10,
 183                                         spacing: 10,
 184                                         onShowTab: function() {
 185                                                 this.find('#embed').value(dataToHtml(this.parent().toJSON()));
 186                                         },
 187                                         items: [
 188                                                 {
 189                                                         type: 'label',
 190                                                         text: 'Paste your embed code below:',
 191                                                         forId: 'mcemediasource'
 192                                                 },
 193                                                 embedTextBox
 194                                         ]
 195                                 }
 196                         ],
 197                         onSubmit: function() {
 198                                 var beforeObjects, afterObjects, i, y;
 199
 200                                 beforeObjects = editor.dom.select('img[data-mce-object]');
 201                                 editor.insertContent(dataToHtml(this.toJSON()));
 202                                 afterObjects = editor.dom.select('img[data-mce-object]');
 203
 204                                 // Find new image placeholder so we can select it
 205                                 for (i = 0; i < beforeObjects.length; i++) {
 206                                         for (y = afterObjects.length - 1; y >= 0; y--) {
 207                                                 if (beforeObjects[i] == afterObjects[y]) {
 208                                                         afterObjects.splice(y, 1);
 209                                                 }
 210                                         }
 211                                 }
 212
 213                                 editor.selection.select(afterObjects[0]);
 214                                 editor.nodeChanged();
 215                         }
 216                 });
 217         }
 218
 219         function getSource() {
 220                 var elm = editor.selection.getNode();
 221
 222                 if (elm.getAttribute('data-mce-object')) {
 223                         return editor.selection.getContent();
 224                 }
 225         }
 226
 227         function dataToHtml(data) {
 228                 var html = '';
 229
 230                 if (!data.source1) {
 231                         tinymce.extend(data, htmlToData(data.embed));
 232                         if (!data.source1) {
 233                                 return '';
 234                         }
 235                 }
 236
 237                 if (!data.source2) {
 238                         data.source2 = '';
 239                 }
 240
 241                 if (!data.poster) {
 242                         data.poster = '';
 243                 }
 244
 245                 data.source1 = editor.convertURL(data.source1, "source");
 246                 data.source2 = editor.convertURL(data.source2, "source");
 247                 data.source1mime = guessMime(data.source1);
 248                 data.source2mime = guessMime(data.source2);
 249                 data.poster = editor.convertURL(data.poster, "poster");
 250                 data.flashPlayerUrl = editor.convertURL(url + '/moxieplayer.swf', "movie");
 251
 252                 tinymce.each(urlPatterns, function(pattern) {
 253                         var match, i, url;
 254
 255                         if ((match = pattern.regex.exec(data.source1))) {
 256                                 url = pattern.url;
 257
 258                                 for (i = 0; match[i]; i++) {
 259                                         /*jshint loopfunc:true*/
 260                                         /*eslint no-loop-func:0 */
 261                                         url = url.replace('$' + i, function() {
 262                                                 return match[i];
 263                                         });
 264                                 }
 265
 266                                 data.source1 = url;
 267                                 data.type = pattern.type;
 268                                 data.allowFullscreen = pattern.allowFullscreen;
 269                                 data.width = data.width || pattern.w;
 270                                 data.height = data.height || pattern.h;
 271                         }
 272                 });
 273
 274                 if (data.embed) {
 275                         html = updateHtml(data.embed, data, true);
 276                 } else {
 277                         var videoScript = getVideoScriptMatch(data.source1);
 278                         if (videoScript) {
 279                                 data.type = 'script';
 280                                 data.width = videoScript.width;
 281                                 data.height = videoScript.height;
 282                         }
 283
 284                         data.width = data.width || 300;
 285                         data.height = data.height || 150;
 286
 287                         tinymce.each(data, function(value, key) {
 288                                 data[key] = editor.dom.encode(value);
 289                         });
 290
 291                         if (data.type == "iframe") {
 292                                 var allowFullscreen = data.allowFullscreen ? ' allowFullscreen="1"' : '';
 293                                 html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"' + allowFullscreen + '></iframe>';
 294                         } else if (data.source1mime == "application/x-shockwave-flash") {
 295                                 html += '<object data="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '" type="application/x-shockwave-flash">';
 296
 297                                 if (data.poster) {
 298                                         html += '<img src="' + data.poster + '" width="' + data.width + '" height="' + data.height + '" />';
 299                                 }
 300
 301                                 html += '</object>';
 302                         } else if (data.source1mime.indexOf('audio') != -1) {
 303                                 if (editor.settings.audio_template_callback) {
 304                                         html = editor.settings.audio_template_callback(data);
 305                                 } else {
 306                                         html += (
 307                                                 '<audio controls="controls" src="' + data.source1 + '">' +
 308                                                         (data.source2 ? '\n<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
 309                                                 '</audio>'
 310                                         );
 311                                 }
 312                         } else if (data.type == "script") {
 313                                 html += '<script src="' + data.source1 + '"></script>';
 314                         } else {
 315                                 if (editor.settings.video_template_callback) {
 316                                         html = editor.settings.video_template_callback(data);
 317                                 } else {
 318                                         html = (
 319                                                 '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' +
 320                                                         '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' +
 321                                                         (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
 322                                                 '</video>'
 323                                         );
 324                                 }
 325                         }
 326                 }
 327
 328                 return html;
 329         }
 330
 331         function htmlToData(html) {
 332                 var data = {};
 333
 334                 new tinymce.html.SaxParser({
 335                         validate: false,
 336                         allow_conditional_comments: true,
 337                         special: 'script,noscript',
 338                         start: function(name, attrs) {
 339                                 if (!data.source1 && name == "param") {
 340                                         data.source1 = attrs.map.movie;
 341                                 }
 342
 343                                 if (name == "iframe" || name == "object" || name == "embed" || name == "video" || name == "audio") {
 344                                         if (!data.type) {
 345                                                 data.type = name;
 346                                         }
 347
 348                                         data = tinymce.extend(attrs.map, data);
 349                                 }
 350
 351                                 if (name == "script") {
 352                                         var videoScript = getVideoScriptMatch(attrs.map.src);
 353                                         if (!videoScript) {
 354                                                 return;
 355                                         }
 356
 357                                         data = {
 358                                                 type: "script",
 359                                                 source1: attrs.map.src,
 360                                                 width: videoScript.width,
 361                                                 height: videoScript.height
 362                                         };
 363                                 }
 364
 365                                 if (name == "source") {
 366                                         if (!data.source1) {
 367                                                 data.source1 = attrs.map.src;
 368                                         } else if (!data.source2) {
 369                                                 data.source2 = attrs.map.src;
 370                                         }
 371                                 }
 372
 373                                 if (name == "img" && !data.poster) {
 374                                         data.poster = attrs.map.src;
 375                                 }
 376                         }
 377                 }).parse(html);
 378
 379                 data.source1 = data.source1 || data.src || data.data;
 380                 data.source2 = data.source2 || '';
 381                 data.poster = data.poster || '';
 382
 383                 return data;
 384         }
 385
 386         function getData(element) {
 387                 if (element.getAttribute('data-mce-object')) {
 388                         return htmlToData(editor.serializer.serialize(element, {selection: true}));
 389                 }
 390
 391                 return {};
 392         }
 393
 394         function sanitize(html) {
 395                 if (editor.settings.media_filter_html === false) {
 396                         return html;
 397                 }
 398
 399                 var writer = new tinymce.html.Writer(), blocked;
 400
 401                 new tinymce.html.SaxParser({
 402                         validate: false,
 403                         allow_conditional_comments: false,
 404                         special: 'script,noscript',
 405
 406                         comment: function(text) {
 407                                 writer.comment(text);
 408                         },
 409
 410                         cdata: function(text) {
 411                                 writer.cdata(text);
 412                         },
 413
 414                         text: function(text, raw) {
 415                                 writer.text(text, raw);
 416                         },
 417
 418                         start: function(name, attrs, empty) {
 419                                 blocked = true;
 420
 421                                 if (name == 'script' || name == 'noscript') {
 422                                         return;
 423                                 }
 424
 425                                 for (var i = 0; i < attrs.length; i++) {
 426                                         if (attrs[i].name.indexOf('on') === 0) {
 427                                                 return;
 428                                         }
 429
 430                                         if (attrs[i].name == 'style') {
 431                                                 attrs[i].value = editor.dom.serializeStyle(editor.dom.parseStyle(attrs[i].value), name);
 432                                         }
 433                                 }
 434
 435                                 writer.start(name, attrs, empty);
 436                                 blocked = false;
 437                         },
 438
 439                         end: function(name) {
 440                                 if (blocked) {
 441                                         return;
 442                                 }
 443
 444                                 writer.end(name);
 445                         }
 446                 }, new tinymce.html.Schema({})).parse(html);
 447
 448                 return writer.getContent();
 449         }
 450
 451         function updateHtml(html, data, updateAll) {
 452                 var writer = new tinymce.html.Writer();
 453                 var sourceCount = 0, hasImage;
 454
 455                 function setAttributes(attrs, updatedAttrs) {
 456                         var name, i, value, attr;
 457
 458                         for (name in updatedAttrs) {
 459                                 value = "" + updatedAttrs[name];
 460
 461                                 if (attrs.map[name]) {
 462                                         i = attrs.length;
 463                                         while (i--) {
 464                                                 attr = attrs[i];
 465
 466                                                 if (attr.name == name) {
 467                                                         if (value) {
 468                                                                 attrs.map[name] = value;
 469                                                                 attr.value = value;
 470                                                         } else {
 471                                                                 delete attrs.map[name];
 472                                                                 attrs.splice(i, 1);
 473                                                         }
 474                                                 }
 475                                         }
 476                                 } else if (value) {
 477                                         attrs.push({
 478                                                 name: name,
 479                                                 value: value
 480                                         });
 481
 482                                         attrs.map[name] = value;
 483                                 }
 484                         }
 485                 }
 486
 487                 new tinymce.html.SaxParser({
 488                         validate: false,
 489                         allow_conditional_comments: true,
 490                         special: 'script,noscript',
 491
 492                         comment: function(text) {
 493                                 writer.comment(text);
 494                         },
 495
 496                         cdata: function(text) {
 497                                 writer.cdata(text);
 498                         },
 499
 500                         text: function(text, raw) {
 501                                 writer.text(text, raw);
 502                         },
 503
 504                         start: function(name, attrs, empty) {
 505                                 switch (name) {
 506                                         case "video":
 507                                         case "object":
 508                                         case "embed":
 509                                         case "img":
 510                                         case "iframe":
 511                                                 setAttributes(attrs, {
 512                                                         width: data.width,
 513                                                         height: data.height
 514                                                 });
 515                                                 break;
 516                                 }
 517
 518                                 if (updateAll) {
 519                                         switch (name) {
 520                                                 case "video":
 521                                                         setAttributes(attrs, {
 522                                                                 poster: data.poster,
 523                                                                 src: ""
 524                                                         });
 525
 526                                                         if (data.source2) {
 527                                                                 setAttributes(attrs, {
 528                                                                         src: ""
 529                                                                 });
 530                                                         }
 531                                                         break;
 532
 533                                                 case "iframe":
 534                                                         setAttributes(attrs, {
 535                                                                 src: data.source1
 536                                                         });
 537                                                         break;
 538
 539                                                 case "source":
 540                                                         sourceCount++;
 541
 542                                                         if (sourceCount <= 2) {
 543                                                                 setAttributes(attrs, {
 544                                                                         src: data["source" + sourceCount],
 545                                                                         type: data["source" + sourceCount + "mime"]
 546                                                                 });
 547
 548                                                                 if (!data["source" + sourceCount]) {
 549                                                                         return;
 550                                                                 }
 551                                                         }
 552                                                         break;
 553
 554                                                 case "img":
 555                                                         if (!data.poster) {
 556                                                                 return;
 557                                                         }
 558
 559                                                         hasImage = true;
 560                                                         break;
 561                                         }
 562                                 }
 563
 564                                 writer.start(name, attrs, empty);
 565                         },
 566
 567                         end: function(name) {
 568                                 if (name == "video" && updateAll) {
 569                                         for (var index = 1; index <= 2; index++) {
 570                                                 if (data["source" + index]) {
 571                                                         var attrs = [];
 572                                                         attrs.map = {};
 573
 574                                                         if (sourceCount < index) {
 575                                                                 setAttributes(attrs, {
 576                                                                         src: data["source" + index],
 577                                                                         type: data["source" + index + "mime"]
 578                                                                 });
 579
 580                                                                 writer.start("source", attrs, true);
 581                                                         }
 582                                                 }
 583                                         }
 584                                 }
 585
 586                                 if (data.poster && name == "object" && updateAll && !hasImage) {
 587                                         var imgAttrs = [];
 588                                         imgAttrs.map = {};
 589
 590                                         setAttributes(imgAttrs, {
 591                                                 src: data.poster,
 592                                                 width: data.width,
 593                                                 height: data.height
 594                                         });
 595
 596                                         writer.start("img", imgAttrs, true);
 597                                 }
 598
 599                                 writer.end(name);
 600                         }
 601                 }, new tinymce.html.Schema({})).parse(html);
 602
 603                 return writer.getContent();
 604         }
 605
 606         editor.on('ResolveName', function(e) {
 607                 var name;
 608
 609                 if (e.target.nodeType == 1 && (name = e.target.getAttribute("data-mce-object"))) {
 610                         e.name = name;
 611                 }
 612         });
 613
 614         editor.on('preInit', function() {
 615                 // Make sure that any messy HTML is retained inside these
 616                 var specialElements = editor.schema.getSpecialElements();
 617                 tinymce.each('video audio iframe object'.split(' '), function(name) {
 618                         specialElements[name] = new RegExp('<\/' + name + '[^>]*>', 'gi');
 619                 });
 620
 621                 // Allow elements
 622                 //editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
 623
 624                 // Set allowFullscreen attribs as boolean
 625                 var boolAttrs = editor.schema.getBoolAttrs();
 626                 tinymce.each('webkitallowfullscreen mozallowfullscreen allowfullscreen'.split(' '), function(name) {
 627                         boolAttrs[name] = {};
 628                 });
 629
 630                 // Converts iframe, video etc into placeholder images
 631                 editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes, name) {
 632                         var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
 633                         var videoScript;
 634
 635                         while (i--) {
 636                                 node = nodes[i];
 637                                 if (!node.parent) {
 638                                         continue;
 639                                 }
 640
 641                                 if (node.name == 'script') {
 642                                         videoScript = getVideoScriptMatch(node.attr('src'));
 643                                         if (!videoScript) {
 644                                                 continue;
 645                                         }
 646                                 }
 647
 648                                 placeHolder = new tinymce.html.Node('img', 1);
 649                                 placeHolder.shortEnded = true;
 650
 651                                 if (videoScript) {
 652                                         if (videoScript.width) {
 653                                                 node.attr('width', videoScript.width.toString());
 654                                         }
 655
 656                                         if (videoScript.height) {
 657                                                 node.attr('height', videoScript.height.toString());
 658                                         }
 659                                 }
 660
 661                                 // Prefix all attributes except width, height and style since we
 662                                 // will add these to the placeholder
 663                                 attribs = node.attributes;
 664                                 ai = attribs.length;
 665                                 while (ai--) {
 666                                         attrName = attribs[ai].name;
 667                                         attrValue = attribs[ai].value;
 668
 669                                         if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
 670                                                 if (attrName == "data" || attrName == "src") {
 671                                                         attrValue = editor.convertURL(attrValue, attrName);
 672                                                 }
 673
 674                                                 placeHolder.attr('data-mce-p-' + attrName, attrValue);
 675                                         }
 676                                 }
 677
 678                                 // Place the inner HTML contents inside an escaped attribute
 679                                 // This enables us to copy/paste the fake object
 680                                 innerHtml = node.firstChild && node.firstChild.value;
 681                                 if (innerHtml) {
 682                                         placeHolder.attr("data-mce-html", escape(innerHtml));
 683                                         placeHolder.firstChild = null;
 684                                 }
 685
 686                                 placeHolder.attr({
 687                                         width: node.attr('width') || "300",
 688                                         height: node.attr('height') || (name == "audio" ? "30" : "150"),
 689                                         style: node.attr('style'),
 690                                         src: tinymce.Env.transparentSrc,
 691                                         "data-mce-object": name,
 692                                         "class": "mce-object mce-object-" + name
 693                                 });
 694
 695                                 node.replace(placeHolder);
 696                         }
 697                 });
 698
 699                 // Replaces placeholder images with real elements for video, object, iframe etc
 700                 editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
 701                         var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName;
 702
 703                         while (i--) {
 704                                 node = nodes[i];
 705                                 if (!node.parent) {
 706                                         continue;
 707                                 }
 708
 709                                 realElmName = node.attr(name);
 710                                 realElm = new tinymce.html.Node(realElmName, 1);
 711
 712                                 // Add width/height to everything but audio
 713                                 if (realElmName != "audio" && realElmName != "script") {
 714                                         realElm.attr({
 715                                                 width: node.attr('width'),
 716                                                 height: node.attr('height')
 717                                         });
 718                                 }
 719
 720                                 realElm.attr({
 721                                         style: node.attr('style')
 722                                 });
 723
 724                                 // Unprefix all placeholder attributes
 725                                 attribs = node.attributes;
 726                                 ai = attribs.length;
 727                                 while (ai--) {
 728                                         var attrName = attribs[ai].name;
 729
 730                                         if (attrName.indexOf('data-mce-p-') === 0) {
 731                                                 realElm.attr(attrName.substr(11), attribs[ai].value);
 732                                         }
 733                                 }
 734
 735                                 if (realElmName == "script") {
 736                                         realElm.attr('type', 'text/javascript');
 737                                 }
 738
 739                                 // Inject innerhtml
 740                                 innerHtml = node.attr('data-mce-html');
 741                                 if (innerHtml) {
 742                                         innerNode = new tinymce.html.Node('#text', 3);
 743                                         innerNode.raw = true;
 744                                         innerNode.value = sanitize(unescape(innerHtml));
 745                                         realElm.append(innerNode);
 746                                 }
 747
 748                                 node.replace(realElm);
 749                         }
 750                 });
 751         });
 752
 753         editor.on('ObjectSelected', function(e) {
 754                 var objectType = e.target.getAttribute('data-mce-object');
 755
 756                 if (objectType == "audio" || objectType == "script") {
 757                         e.preventDefault();
 758                 }
 759         });
 760
 761         editor.on('objectResized', function(e) {
 762                 var target = e.target, html;
 763
 764                 if (target.getAttribute('data-mce-object')) {
 765                         html = target.getAttribute('data-mce-html');
 766                         if (html) {
 767                                 html = unescape(html);
 768                                 target.setAttribute('data-mce-html', escape(
 769                                         updateHtml(html, {
 770                                                 width: e.width,
 771                                                 height: e.height
 772                                         })
 773                                 ));
 774                         }
 775                 }
 776         });
 777
 778         editor.addButton('media', {
 779                 tooltip: 'Insert/edit video',
 780                 onclick: showDialog,
 781                 stateSelector: ['img[data-mce-object=video]', 'img[data-mce-object=iframe]']
 782         });
 783
 784         editor.addMenuItem('media', {
 785                 icon: 'media',
 786                 text: 'Insert/edit video',
 787                 onclick: showDialog,
 788                 context: 'insert',
 789                 prependToContext: true
 790         });
 791
 792         this.showDialog = showDialog;
 793 });