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