4 * Released under LGPL License.
5 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
11 /*jshint maxlen:255 */
13 /*global tinymce:true */
15 tinymce.PluginManager.add('media', function(editor, url) {
17 {regex: /youtu\.be\/([\w\-.]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$1'},
18 {regex: /youtube\.com(.+)v=([^&]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$2'},
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'},
20 {regex: /vimeo\.com\/(.*)\/([0-9]+)/, type: "iframe", w: 425, h: 350, url: "//player.vimeo.com/video/$2?title=0&byline=0"},
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"'}
24 var embedChange = (tinymce.Env.ie && tinymce.Env.ie <= 8) ? 'onChange' : 'onInput';
26 function guessMime(url) {
27 url = url.toLowerCase();
29 if (url.indexOf('.mp3') != -1) {
33 if (url.indexOf('.wav') != -1) {
37 if (url.indexOf('.mp4') != -1) {
41 if (url.indexOf('.webm') != -1) {
45 if (url.indexOf('.ogg') != -1) {
49 if (url.indexOf('.swf') != -1) {
50 return 'application/x-shockwave-flash';
56 function getVideoScriptMatch(src) {
57 var prefixes = editor.settings.media_scripts;
60 for (var i = 0; i < prefixes.length; i++) {
61 if (src.indexOf(prefixes[i].filter) !== -1) {
68 function showDialog() {
69 var win, width, height, data;
71 var generalFormItems = [
79 onchange: function(e) {
80 tinymce.each(e.meta, function(value, key) {
81 win.find('#' + key).value(value);
87 function recalcSize(e) {
88 var widthCtrl, heightCtrl, newWidth, newHeight;
90 widthCtrl = win.find('#width')[0];
91 heightCtrl = win.find('#height')[0];
93 newWidth = widthCtrl.value();
94 newHeight = heightCtrl.value();
96 if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
97 if (e.control == widthCtrl) {
98 newHeight = Math.round((newWidth / width) * newHeight);
100 if (!isNaN(newHeight)) {
101 heightCtrl.value(newHeight);
104 newWidth = Math.round((newHeight / height) * newWidth);
106 if (!isNaN(newWidth)) {
107 widthCtrl.value(newWidth);
116 if (editor.settings.media_alt_source !== false) {
117 generalFormItems.push({name: 'source2', type: 'filepicker', filetype: 'media', size: 40, label: 'Alternative source'});
120 if (editor.settings.media_poster !== false) {
121 generalFormItems.push({name: 'poster', type: 'filepicker', filetype: 'image', size: 40, label: 'Poster'});
124 if (editor.settings.media_dimensions !== false) {
125 generalFormItems.push({
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'}
140 data = getData(editor.selection.getNode());
142 height = data.height;
145 id: 'mcemediasource',
154 function updateValueOnChange() {
155 data = htmlToData(this.value());
156 this.parent().parent().fromJSON(data);
159 embedTextBox[embedChange] = updateValueOnChange;
161 win = editor.windowManager.open({
162 title: 'Insert/edit video',
164 bodyType: 'tabpanel',
169 onShowTab: function() {
170 data = htmlToData(this.next().find('#embed').value());
173 items: generalFormItems
184 onShowTab: function() {
185 this.find('#embed').value(dataToHtml(this.parent().toJSON()));
190 text: 'Paste your embed code below:',
191 forId: 'mcemediasource'
197 onSubmit: function() {
198 var beforeObjects, afterObjects, i, y;
200 beforeObjects = editor.dom.select('img[data-mce-object]');
201 editor.insertContent(dataToHtml(this.toJSON()));
202 afterObjects = editor.dom.select('img[data-mce-object]');
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);
213 editor.selection.select(afterObjects[0]);
214 editor.nodeChanged();
219 function getSource() {
220 var elm = editor.selection.getNode();
222 if (elm.getAttribute('data-mce-object')) {
223 return editor.selection.getContent();
227 function dataToHtml(data) {
231 tinymce.extend(data, htmlToData(data.embed));
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");
252 tinymce.each(urlPatterns, function(pattern) {
255 if ((match = pattern.regex.exec(data.source1))) {
258 for (i = 0; match[i]; i++) {
259 /*jshint loopfunc:true*/
260 /*eslint no-loop-func:0 */
261 url = url.replace('$' + i, function() {
267 data.type = pattern.type;
268 data.width = data.width || pattern.w;
269 data.height = data.height || pattern.h;
274 html = updateHtml(data.embed, data, true);
276 var videoScript = getVideoScriptMatch(data.source1);
278 data.type = 'script';
279 data.width = videoScript.width;
280 data.height = videoScript.height;
283 data.width = data.width || 300;
284 data.height = data.height || 150;
286 tinymce.each(data, function(value, key) {
287 data[key] = editor.dom.encode(value);
290 if (data.type == "iframe") {
291 html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"></iframe>';
292 } else if (data.source1mime == "application/x-shockwave-flash") {
293 html += '<object data="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '" type="application/x-shockwave-flash">';
296 html += '<img src="' + data.poster + '" width="' + data.width + '" height="' + data.height + '" />';
300 } else if (data.source1mime.indexOf('audio') != -1) {
301 if (editor.settings.audio_template_callback) {
302 html = editor.settings.audio_template_callback(data);
305 '<audio controls="controls" src="' + data.source1 + '">' +
306 (data.source2 ? '\n<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
310 } else if (data.type == "script") {
311 html += '<script src="' + data.source1 + '"></script>';
313 if (editor.settings.video_template_callback) {
314 html = editor.settings.video_template_callback(data);
317 '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' +
318 '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' +
319 (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
329 function htmlToData(html) {
332 new tinymce.html.SaxParser({
334 allow_conditional_comments: true,
335 special: 'script,noscript',
336 start: function(name, attrs) {
337 if (!data.source1 && name == "param") {
338 data.source1 = attrs.map.movie;
341 if (name == "iframe" || name == "object" || name == "embed" || name == "video" || name == "audio") {
346 data = tinymce.extend(attrs.map, data);
349 if (name == "script") {
350 var videoScript = getVideoScriptMatch(attrs.map.src);
357 source1: attrs.map.src,
358 width: videoScript.width,
359 height: videoScript.height
363 if (name == "source") {
365 data.source1 = attrs.map.src;
366 } else if (!data.source2) {
367 data.source2 = attrs.map.src;
371 if (name == "img" && !data.poster) {
372 data.poster = attrs.map.src;
377 data.source1 = data.source1 || data.src || data.data;
378 data.source2 = data.source2 || '';
379 data.poster = data.poster || '';
384 function getData(element) {
385 if (element.getAttribute('data-mce-object')) {
386 return htmlToData(editor.serializer.serialize(element, {selection: true}));
392 function sanitize(html) {
393 if (editor.settings.media_filter_html === false) {
397 var writer = new tinymce.html.Writer();
399 new tinymce.html.SaxParser({
401 allow_conditional_comments: false,
402 special: 'script,noscript',
404 comment: function(text) {
405 writer.comment(text);
408 cdata: function(text) {
412 text: function(text, raw) {
413 writer.text(text, raw);
416 start: function(name, attrs, empty) {
417 if (name == 'script' || name == 'noscript') {
421 for (var i = 0; i < attrs.length; i++) {
422 if (attrs[i].name.indexOf('on') === 0) {
427 writer.start(name, attrs, empty);
430 end: function(name) {
431 if (name == 'script' || name == 'noscript') {
437 }, new tinymce.html.Schema({})).parse(html);
439 return writer.getContent();
442 function updateHtml(html, data, updateAll) {
443 var writer = new tinymce.html.Writer();
444 var sourceCount = 0, hasImage;
446 function setAttributes(attrs, updatedAttrs) {
447 var name, i, value, attr;
449 for (name in updatedAttrs) {
450 value = "" + updatedAttrs[name];
452 if (attrs.map[name]) {
457 if (attr.name == name) {
459 attrs.map[name] = value;
462 delete attrs.map[name];
473 attrs.map[name] = value;
478 new tinymce.html.SaxParser({
480 allow_conditional_comments: true,
481 special: 'script,noscript',
483 comment: function(text) {
484 writer.comment(text);
487 cdata: function(text) {
491 text: function(text, raw) {
492 writer.text(text, raw);
495 start: function(name, attrs, empty) {
502 setAttributes(attrs, {
512 setAttributes(attrs, {
518 setAttributes(attrs, {
525 setAttributes(attrs, {
533 if (sourceCount <= 2) {
534 setAttributes(attrs, {
535 src: data["source" + sourceCount],
536 type: data["source" + sourceCount + "mime"]
539 if (!data["source" + sourceCount]) {
555 writer.start(name, attrs, empty);
558 end: function(name) {
559 if (name == "video" && updateAll) {
560 for (var index = 1; index <= 2; index++) {
561 if (data["source" + index]) {
565 if (sourceCount < index) {
566 setAttributes(attrs, {
567 src: data["source" + index],
568 type: data["source" + index + "mime"]
571 writer.start("source", attrs, true);
577 if (data.poster && name == "object" && updateAll && !hasImage) {
581 setAttributes(imgAttrs, {
587 writer.start("img", imgAttrs, true);
592 }, new tinymce.html.Schema({})).parse(html);
594 return writer.getContent();
597 editor.on('ResolveName', function(e) {
600 if (e.target.nodeType == 1 && (name = e.target.getAttribute("data-mce-object"))) {
605 editor.on('preInit', function() {
606 // Make sure that any messy HTML is retained inside these
607 var specialElements = editor.schema.getSpecialElements();
608 tinymce.each('video audio iframe object'.split(' '), function(name) {
609 specialElements[name] = new RegExp('<\/' + name + '[^>]*>', 'gi');
613 //editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
615 // Set allowFullscreen attribs as boolean
616 var boolAttrs = editor.schema.getBoolAttrs();
617 tinymce.each('webkitallowfullscreen mozallowfullscreen allowfullscreen'.split(' '), function(name) {
618 boolAttrs[name] = {};
621 // Converts iframe, video etc into placeholder images
622 editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes, name) {
623 var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
632 if (node.name == 'script') {
633 videoScript = getVideoScriptMatch(node.attr('src'));
639 placeHolder = new tinymce.html.Node('img', 1);
640 placeHolder.shortEnded = true;
643 if (videoScript.width) {
644 node.attr('width', videoScript.width.toString());
647 if (videoScript.height) {
648 node.attr('height', videoScript.height.toString());
652 // Prefix all attributes except width, height and style since we
653 // will add these to the placeholder
654 attribs = node.attributes;
657 attrName = attribs[ai].name;
658 attrValue = attribs[ai].value;
660 if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
661 if (attrName == "data" || attrName == "src") {
662 attrValue = editor.convertURL(attrValue, attrName);
665 placeHolder.attr('data-mce-p-' + attrName, attrValue);
669 // Place the inner HTML contents inside an escaped attribute
670 // This enables us to copy/paste the fake object
671 innerHtml = node.firstChild && node.firstChild.value;
673 placeHolder.attr("data-mce-html", escape(innerHtml));
674 placeHolder.firstChild = null;
678 width: node.attr('width') || "300",
679 height: node.attr('height') || (name == "audio" ? "30" : "150"),
680 style: node.attr('style'),
681 src: tinymce.Env.transparentSrc,
682 "data-mce-object": name,
683 "class": "mce-object mce-object-" + name
686 node.replace(placeHolder);
690 // Replaces placeholder images with real elements for video, object, iframe etc
691 editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
692 var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName;
700 realElmName = node.attr(name);
701 realElm = new tinymce.html.Node(realElmName, 1);
703 // Add width/height to everything but audio
704 if (realElmName != "audio" && realElmName != "script") {
706 width: node.attr('width'),
707 height: node.attr('height')
712 style: node.attr('style')
715 // Unprefix all placeholder attributes
716 attribs = node.attributes;
719 var attrName = attribs[ai].name;
721 if (attrName.indexOf('data-mce-p-') === 0) {
722 realElm.attr(attrName.substr(11), attribs[ai].value);
726 if (realElmName == "script") {
727 realElm.attr('type', 'text/javascript');
731 innerHtml = node.attr('data-mce-html');
733 innerNode = new tinymce.html.Node('#text', 3);
734 innerNode.raw = true;
735 innerNode.value = sanitize(unescape(innerHtml));
736 realElm.append(innerNode);
739 node.replace(realElm);
744 editor.on('ObjectSelected', function(e) {
745 var objectType = e.target.getAttribute('data-mce-object');
747 if (objectType == "audio" || objectType == "script") {
752 editor.on('objectResized', function(e) {
753 var target = e.target, html;
755 if (target.getAttribute('data-mce-object')) {
756 html = target.getAttribute('data-mce-html');
758 html = unescape(html);
759 target.setAttribute('data-mce-html', escape(
769 editor.addButton('media', {
770 tooltip: 'Insert/edit video',
772 stateSelector: ['img[data-mce-object=video]', 'img[data-mce-object=iframe]']
775 editor.addMenuItem('media', {
777 text: 'Insert/edit video',
780 prependToContext: true