4 * Copyright, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
11 /*jshint maxlen:255 */
12 /*global tinymce:true */
14 tinymce.PluginManager.add('media', function(editor, url) {
16 {regex: /youtu\.be\/([a-z1-9.-_]+)/, type: 'iframe', w: 425, h: 350, url: 'http://www.youtube.com/embed/$1'},
17 {regex: /youtube\.com(.+)v=([^&]+)/, type: 'iframe', w: 425, h: 350, url: 'http://www.youtube.com/embed/$2'},
18 {regex: /vimeo\.com\/([0-9]+)/, type: 'iframe', w: 425, h: 350, url: 'http://player.vimeo.com/video/$1?title=0&byline=0&portrait=0&color=8dc7dc'},
19 {regex: /maps\.google\.([a-z]{2,3})\/maps\/(.+)msid=(.+)/, type: 'iframe', w: 425, h: 350, url: 'http://maps.google.com/maps/ms?msid=$2&output=embed"'}
22 function guessMime(url) {
23 if (url.indexOf('.mp3') != -1) {
27 if (url.indexOf('.wav') != -1) {
31 if (url.indexOf('.mp4') != -1) {
35 if (url.indexOf('.webm') != -1) {
39 if (url.indexOf('.ogg') != -1) {
43 if (url.indexOf('.swf') != -1) {
44 return 'application/x-shockwave-flash';
50 function showDialog() {
51 var win, width, height, data;
53 function recalcSize(e) {
54 var widthCtrl, heightCtrl, newWidth, newHeight;
56 widthCtrl = win.find('#width')[0];
57 heightCtrl = win.find('#height')[0];
59 newWidth = widthCtrl.value();
60 newHeight = heightCtrl.value();
62 if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
63 if (e.control == widthCtrl) {
64 newHeight = Math.round((newWidth / width) * newHeight);
65 heightCtrl.value(newHeight);
67 newWidth = Math.round((newHeight / height) * newWidth);
68 widthCtrl.value(newWidth);
76 data = getData(editor.selection.getNode());
80 win = editor.windowManager.open({
81 title: 'Insert/edit video',
88 onShowTab: function() {
89 this.fromJSON(htmlToData(this.next().find('#embed').value()));
92 {name: 'source1', type: 'filepicker', filetype: 'media', size: 40, autofocus: true, label: 'Source'},
93 {name: 'source2', type: 'filepicker', filetype: 'media', size: 40, label: 'Alternative source'},
94 {name: 'poster', type: 'filepicker', filetype: 'image', size: 40, label: 'Poster'},
103 {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
104 {type: 'label', text: 'x'},
105 {name: 'height', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
106 {name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'}
120 onShowTab: function() {
121 this.find('#embed').value(dataToHtml(this.parent().toJSON()));
126 text: 'Paste your embed code below:'
139 onSubmit: function() {
140 editor.insertContent(dataToHtml(this.toJSON()));
145 function getSource() {
146 var elm = editor.selection.getNode();
148 if (elm.getAttribute('data-mce-object')) {
149 return editor.selection.getContent();
153 function dataToHtml(data) {
157 tinymce.extend(data, htmlToData(data.embed));
163 data.source1 = editor.convertURL(data.source1, "source");
164 data.source2 = editor.convertURL(data.source2, "source");
165 data.source1mime = guessMime(data.source1);
166 data.source2mime = guessMime(data.source2);
167 data.poster = editor.convertURL(data.poster, "poster");
168 data.flashPlayerUrl = editor.convertURL(url + '/moxieplayer.swf', "movie");
171 html = updateHtml(data.embed, data, true);
173 tinymce.each(urlPatterns, function(pattern) {
176 if ((match = pattern.regex.exec(data.source1))) {
179 for (i = 0; match[i]; i++) {
180 /*jshint loopfunc:true*/
181 url = url.replace('$' + i, function() {
187 data.type = pattern.type;
188 data.width = pattern.w;
189 data.height = pattern.h;
193 data.width = data.width || 300;
194 data.height = data.height || 150;
196 tinymce.each(data, function(value, key) {
197 data[key] = editor.dom.encode(value);
200 if (data.type == "iframe") {
201 html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"></iframe>';
202 } else if (data.source1mime == "application/x-shockwave-flash") {
203 html += '<object data="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '" type="application/x-shockwave-flash">';
206 html += '<img src="' + data.poster + '" width="' + data.width + '" height="' + data.height + '" />';
210 } else if (data.source1mime.indexOf('audio') != -1) {
211 if (editor.settings.audio_template_callback) {
212 html = editor.settings.audio_template_callback(data);
215 '<audio controls="controls" src="' + data.source1 + '">' +
216 (data.source2 ? '\n<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
221 if (editor.settings.video_template_callback) {
222 html = editor.settings.video_template_callback(data);
225 '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' +
226 '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' +
227 (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
237 function htmlToData(html) {
240 new tinymce.html.SaxParser({
242 special: 'script,noscript',
243 start: function(name, attrs) {
244 if (!data.source1 && name == "param") {
245 data.source1 = attrs.map.movie;
248 if (name == "iframe" || name == "object" || name == "embed" || name == "video" || name == "audio") {
249 data = tinymce.extend(attrs.map, data);
252 if (name == "source") {
254 data.source1 = attrs.map.src;
255 } else if (!data.source2) {
256 data.source2 = attrs.map.src;
260 if (name == "img" && !data.poster) {
261 data.poster = attrs.map.src;
266 data.source1 = data.source1 || data.src || data.data;
267 data.source2 = data.source2 || '';
268 data.poster = data.poster || '';
273 function getData(element) {
274 if (element.getAttribute('data-mce-object')) {
275 return htmlToData(editor.serializer.serialize(element, {selection: true}));
281 function updateHtml(html, data, updateAll) {
282 var writer = new tinymce.html.Writer();
283 var sourceCount = 0, hasImage;
285 function setAttributes(attrs, updatedAttrs) {
286 var name, i, value, attr;
288 for (name in updatedAttrs) {
289 value = "" + updatedAttrs[name];
291 if (attrs.map[name]) {
296 if (attr.name == name) {
298 attrs.map[name] = value;
301 delete attrs.map[name];
312 attrs.map[name] = value;
317 new tinymce.html.SaxParser({
319 special: 'script,noscript',
321 comment: function(text) {
322 writer.comment(text);
325 cdata: function(text) {
329 text: function(text, raw) {
330 writer.text(text, raw);
333 start: function(name, attrs, empty) {
339 setAttributes(attrs, {
349 setAttributes(attrs, {
355 setAttributes(attrs, {
362 setAttributes(attrs, {
370 if (sourceCount <= 2) {
371 setAttributes(attrs, {
372 src: data["source" + sourceCount],
373 type: data["source" + sourceCount + "mime"]
376 if (!data["source" + sourceCount]) {
392 writer.start(name, attrs, empty);
395 end: function(name) {
396 if (name == "video" && updateAll) {
397 for (var index = 1; index <= 2; index++) {
398 if (data["source" + index]) {
402 if (sourceCount < index) {
403 setAttributes(attrs, {
404 src: data["source" + index],
405 type: data["source" + index + "mime"]
408 writer.start("source", attrs, true);
414 if (data.poster && name == "object" && updateAll && !hasImage) {
418 setAttributes(imgAttrs, {
424 writer.start("img", imgAttrs, true);
429 }, new tinymce.html.Schema({})).parse(html);
431 return writer.getContent();
434 editor.on('ResolveName', function(e) {
437 if (e.target.nodeType == 1 && (name = e.target.getAttribute("data-mce-object"))) {
442 editor.on('preInit', function() {
443 // Make sure that any messy HTML is retained inside these
444 var specialElements = editor.schema.getSpecialElements();
445 tinymce.each('video audio iframe object'.split(' '), function(name) {
446 specialElements[name] = new RegExp('<\/' + name + '[^>]*>','gi');
450 editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
452 // Set allowFullscreen attribs as boolean
453 var boolAttrs = editor.schema.getBoolAttrs();
454 tinymce.each('webkitallowfullscreen mozallowfullscreen allowfullscreen'.split(' '), function(name) {
455 boolAttrs[name] = {};
458 // Converts iframe, video etc into placeholder images
459 editor.parser.addNodeFilter('iframe,video,audio,object,embed', function(nodes, name) {
460 var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
464 placeHolder = new tinymce.html.Node('img', 1);
465 placeHolder.shortEnded = true;
467 // Prefix all attributes except width, height and style since we
468 // will add these to the placeholder
469 attribs = node.attributes;
472 attrName = attribs[ai].name;
473 attrValue = attribs[ai].value;
475 if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
476 if (attrName == "data" || attrName == "src") {
477 attrValue = editor.convertURL(attrValue, attrName);
480 placeHolder.attr('data-mce-p-' + attrName, attrValue);
484 // Place the inner HTML contents inside an escaped attribute
485 // This enables us to copy/paste the fake object
486 innerHtml = node.firstChild && node.firstChild.value;
488 placeHolder.attr("data-mce-html", escape(innerHtml));
489 placeHolder.firstChild = null;
493 width: node.attr('width') || "300",
494 height: node.attr('height') || (name == "audio" ? "30" : "150"),
495 style: node.attr('style'),
496 src: tinymce.Env.transparentSrc,
497 "data-mce-object": name,
498 "class": "mce-object mce-object-" + name
501 node.replace(placeHolder);
505 // Replaces placeholder images with real elements for video, object, iframe etc
506 editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
507 var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode;
511 realElm = new tinymce.html.Node(node.attr(name), 1);
513 // Add width/height to everything but audio
514 if (node.attr(name) != "audio") {
516 width: node.attr('width'),
517 height: node.attr('height')
522 style: node.attr('style')
525 // Unprefix all placeholder attributes
526 attribs = node.attributes;
529 var attrName = attribs[ai].name;
531 if (attrName.indexOf('data-mce-p-') === 0) {
532 realElm.attr(attrName.substr(11), attribs[ai].value);
537 innerHtml = node.attr('data-mce-html');
539 innerNode = new tinymce.html.Node('#text', 3);
540 innerNode.raw = true;
541 innerNode.value = unescape(innerHtml);
542 realElm.append(innerNode);
545 node.replace(realElm);
551 editor.on('ObjectSelected', function(e) {
552 if (e.target.getAttribute('data-mce-object') == "audio") {
557 editor.on('objectResized', function(e) {
558 var target = e.target, html;
560 if (target.getAttribute('data-mce-object')) {
561 html = target.getAttribute('data-mce-html');
563 html = unescape(html);
564 target.setAttribute('data-mce-html', escape(
574 editor.addButton('media', {
575 tooltip: 'Insert/edit video',
577 stateSelector: 'img[data-mce-object=video]'
580 editor.addMenuItem('media', {
582 text: 'Insert video',
585 prependToContext: true