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