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 */
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
if (url.indexOf('.mp3') != -1) {
31
if (url.indexOf('.wav') != -1) {
35
if (url.indexOf('.mp4') != -1) {
39
if (url.indexOf('.webm') != -1) {
43
if (url.indexOf('.ogg') != -1) {
47
if (url.indexOf('.swf') != -1) {
48
return 'application/x-shockwave-flash';
54
function getVideoScriptMatch(src) {
55
var prefixes = editor.settings.media_scripts;
58
for (var i = 0; i < prefixes.length; i++) {
59
if (src.indexOf(prefixes[i].filter) !== -1) {
66
function showDialog() {
67
var win, width, height, data;
69
var generalFormItems = [
77
onchange: function(e) {
78
tinymce.each(e.meta, function(value, key) {
79
win.find('#' + key).value(value);
85
function recalcSize(e) {
86
var widthCtrl, heightCtrl, newWidth, newHeight;
88
widthCtrl = win.find('#width')[0];
89
heightCtrl = win.find('#height')[0];
91
newWidth = widthCtrl.value();
92
newHeight = heightCtrl.value();
94
if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
95
if (e.control == widthCtrl) {
96
newHeight = Math.round((newWidth / width) * newHeight);
97
heightCtrl.value(newHeight);
99
newWidth = Math.round((newHeight / height) * newWidth);
100
widthCtrl.value(newWidth);
108
if (editor.settings.media_alt_source !== false) {
109
generalFormItems.push({name: 'source2', type: 'filepicker', filetype: 'media', size: 40, label: 'Alternative source'});
112
if (editor.settings.media_poster !== false) {
113
generalFormItems.push({name: 'poster', type: 'filepicker', filetype: 'image', size: 40, label: 'Poster'});
116
if (editor.settings.media_dimensions !== false) {
117
generalFormItems.push({
124
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
125
{type: 'label', text: 'x'},
126
{name: 'height', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
127
{name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'}
132
data = getData(editor.selection.getNode());
134
height = data.height;
137
id: 'mcemediasource',
146
function updateValueOnChange() {
147
data = htmlToData(this.value());
148
this.parent().parent().fromJSON(data);
151
embedTextBox[embedChange] = updateValueOnChange;
153
win = editor.windowManager.open({
154
title: 'Insert/edit video',
156
bodyType: 'tabpanel',
161
onShowTab: function() {
162
data = htmlToData(this.next().find('#embed').value());
165
items: generalFormItems
176
onShowTab: function() {
177
this.find('#embed').value(dataToHtml(this.parent().toJSON()));
182
text: 'Paste your embed code below:',
183
forId: 'mcemediasource'
189
onSubmit: function() {
190
var beforeObjects, afterObjects, i, y;
192
beforeObjects = editor.dom.select('img[data-mce-object]');
193
editor.insertContent(dataToHtml(this.toJSON()));
194
afterObjects = editor.dom.select('img[data-mce-object]');
196
// Find new image placeholder so we can select it
197
for (i = 0; i < beforeObjects.length; i++) {
198
for (y = afterObjects.length - 1; y >= 0; y--) {
199
if (beforeObjects[i] == afterObjects[y]) {
200
afterObjects.splice(y, 1);
205
editor.selection.select(afterObjects[0]);
206
editor.nodeChanged();
211
function getSource() {
212
var elm = editor.selection.getNode();
214
if (elm.getAttribute('data-mce-object')) {
215
return editor.selection.getContent();
219
function dataToHtml(data) {
223
tinymce.extend(data, htmlToData(data.embed));
237
data.source1 = editor.convertURL(data.source1, "source");
238
data.source2 = editor.convertURL(data.source2, "source");
239
data.source1mime = guessMime(data.source1);
240
data.source2mime = guessMime(data.source2);
241
data.poster = editor.convertURL(data.poster, "poster");
242
data.flashPlayerUrl = editor.convertURL(url + '/moxieplayer.swf', "movie");
244
tinymce.each(urlPatterns, function(pattern) {
247
if ((match = pattern.regex.exec(data.source1))) {
250
for (i = 0; match[i]; i++) {
251
/*jshint loopfunc:true*/
252
/*eslint no-loop-func:0 */
253
url = url.replace('$' + i, function() {
259
data.type = pattern.type;
260
data.width = data.width || pattern.w;
261
data.height = data.height || pattern.h;
266
html = updateHtml(data.embed, data, true);
268
var videoScript = getVideoScriptMatch(data.source1);
270
data.type = 'script';
271
data.width = videoScript.width;
272
data.height = videoScript.height;
275
data.width = data.width || 300;
276
data.height = data.height || 150;
278
tinymce.each(data, function(value, key) {
279
data[key] = editor.dom.encode(value);
282
if (data.type == "iframe") {
283
html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"></iframe>';
284
} else if (data.source1mime == "application/x-shockwave-flash") {
285
html += '<object data="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '" type="application/x-shockwave-flash">';
288
html += '<img src="' + data.poster + '" width="' + data.width + '" height="' + data.height + '" />';
292
} else if (data.source1mime.indexOf('audio') != -1) {
293
if (editor.settings.audio_template_callback) {
294
html = editor.settings.audio_template_callback(data);
297
'<audio controls="controls" src="' + data.source1 + '">' +
298
(data.source2 ? '\n<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
302
} else if (data.type == "script") {
303
html += '<script src="' + data.source1 + '"></script>';
305
if (editor.settings.video_template_callback) {
306
html = editor.settings.video_template_callback(data);
309
'<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' +
310
'<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' +
311
(data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
321
function htmlToData(html) {
324
new tinymce.html.SaxParser({
326
allow_conditional_comments: true,
327
special: 'script,noscript',
328
start: function(name, attrs) {
329
if (!data.source1 && name == "param") {
330
data.source1 = attrs.map.movie;
333
if (name == "iframe" || name == "object" || name == "embed" || name == "video" || name == "audio") {
338
data = tinymce.extend(attrs.map, data);
341
if (name == "script") {
342
var videoScript = getVideoScriptMatch(attrs.map.src);
349
source1: attrs.map.src,
350
width: videoScript.width,
351
height: videoScript.height
355
if (name == "source") {
357
data.source1 = attrs.map.src;
358
} else if (!data.source2) {
359
data.source2 = attrs.map.src;
363
if (name == "img" && !data.poster) {
364
data.poster = attrs.map.src;
369
data.source1 = data.source1 || data.src || data.data;
370
data.source2 = data.source2 || '';
371
data.poster = data.poster || '';
376
function getData(element) {
377
if (element.getAttribute('data-mce-object')) {
378
return htmlToData(editor.serializer.serialize(element, {selection: true}));
384
function sanitize(html) {
385
if (editor.settings.media_filter_html === false) {
389
var writer = new tinymce.html.Writer();
391
new tinymce.html.SaxParser({
393
allow_conditional_comments: false,
394
special: 'script,noscript',
396
comment: function(text) {
397
writer.comment(text);
400
cdata: function(text) {
404
text: function(text, raw) {
405
writer.text(text, raw);
408
start: function(name, attrs, empty) {
409
if (name == 'script' || name == 'noscript') {
413
for (var i = 0; i < attrs.length; i++) {
414
if (attrs[i].name.indexOf('on') === 0) {
419
writer.start(name, attrs, empty);
422
end: function(name) {
423
if (name == 'script' || name == 'noscript') {
429
}, new tinymce.html.Schema({})).parse(html);
431
return writer.getContent();
434
function updateHtml(html, data, updateAll) {
435
var writer = new tinymce.html.Writer();
436
var sourceCount = 0, hasImage;
438
function setAttributes(attrs, updatedAttrs) {
439
var name, i, value, attr;
441
for (name in updatedAttrs) {
442
value = "" + updatedAttrs[name];
444
if (attrs.map[name]) {
449
if (attr.name == name) {
451
attrs.map[name] = value;
454
delete attrs.map[name];
465
attrs.map[name] = value;
470
new tinymce.html.SaxParser({
472
allow_conditional_comments: true,
473
special: 'script,noscript',
475
comment: function(text) {
476
writer.comment(text);
479
cdata: function(text) {
483
text: function(text, raw) {
484
writer.text(text, raw);
487
start: function(name, attrs, empty) {
494
setAttributes(attrs, {
504
setAttributes(attrs, {
510
setAttributes(attrs, {
517
setAttributes(attrs, {
525
if (sourceCount <= 2) {
526
setAttributes(attrs, {
527
src: data["source" + sourceCount],
528
type: data["source" + sourceCount + "mime"]
531
if (!data["source" + sourceCount]) {
547
writer.start(name, attrs, empty);
550
end: function(name) {
551
if (name == "video" && updateAll) {
552
for (var index = 1; index <= 2; index++) {
553
if (data["source" + index]) {
557
if (sourceCount < index) {
558
setAttributes(attrs, {
559
src: data["source" + index],
560
type: data["source" + index + "mime"]
563
writer.start("source", attrs, true);
569
if (data.poster && name == "object" && updateAll && !hasImage) {
573
setAttributes(imgAttrs, {
579
writer.start("img", imgAttrs, true);
584
}, new tinymce.html.Schema({})).parse(html);
586
return writer.getContent();
589
editor.on('ResolveName', function(e) {
592
if (e.target.nodeType == 1 && (name = e.target.getAttribute("data-mce-object"))) {
597
editor.on('preInit', function() {
598
// Make sure that any messy HTML is retained inside these
599
var specialElements = editor.schema.getSpecialElements();
600
tinymce.each('video audio iframe object'.split(' '), function(name) {
601
specialElements[name] = new RegExp('<\/' + name + '[^>]*>', 'gi');
605
//editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
607
// Set allowFullscreen attribs as boolean
608
var boolAttrs = editor.schema.getBoolAttrs();
609
tinymce.each('webkitallowfullscreen mozallowfullscreen allowfullscreen'.split(' '), function(name) {
610
boolAttrs[name] = {};
613
// Converts iframe, video etc into placeholder images
614
editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes, name) {
615
var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
624
if (node.name == 'script') {
625
videoScript = getVideoScriptMatch(node.attr('src'));
631
placeHolder = new tinymce.html.Node('img', 1);
632
placeHolder.shortEnded = true;
635
if (videoScript.width) {
636
node.attr('width', videoScript.width.toString());
639
if (videoScript.height) {
640
node.attr('height', videoScript.height.toString());
644
// Prefix all attributes except width, height and style since we
645
// will add these to the placeholder
646
attribs = node.attributes;
649
attrName = attribs[ai].name;
650
attrValue = attribs[ai].value;
652
if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
653
if (attrName == "data" || attrName == "src") {
654
attrValue = editor.convertURL(attrValue, attrName);
657
placeHolder.attr('data-mce-p-' + attrName, attrValue);
661
// Place the inner HTML contents inside an escaped attribute
662
// This enables us to copy/paste the fake object
663
innerHtml = node.firstChild && node.firstChild.value;
665
placeHolder.attr("data-mce-html", escape(innerHtml));
666
placeHolder.firstChild = null;
670
width: node.attr('width') || "300",
671
height: node.attr('height') || (name == "audio" ? "30" : "150"),
672
style: node.attr('style'),
673
src: tinymce.Env.transparentSrc,
674
"data-mce-object": name,
675
"class": "mce-object mce-object-" + name
678
node.replace(placeHolder);
682
// Replaces placeholder images with real elements for video, object, iframe etc
683
editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
684
var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName;
692
realElmName = node.attr(name);
693
realElm = new tinymce.html.Node(realElmName, 1);
695
// Add width/height to everything but audio
696
if (realElmName != "audio" && realElmName != "script") {
698
width: node.attr('width'),
699
height: node.attr('height')
704
style: node.attr('style')
707
// Unprefix all placeholder attributes
708
attribs = node.attributes;
711
var attrName = attribs[ai].name;
713
if (attrName.indexOf('data-mce-p-') === 0) {
714
realElm.attr(attrName.substr(11), attribs[ai].value);
718
if (realElmName == "script") {
719
realElm.attr('type', 'text/javascript');
723
innerHtml = node.attr('data-mce-html');
725
innerNode = new tinymce.html.Node('#text', 3);
726
innerNode.raw = true;
727
innerNode.value = sanitize(unescape(innerHtml));
728
realElm.append(innerNode);
731
node.replace(realElm);
736
editor.on('ObjectSelected', function(e) {
737
var objectType = e.target.getAttribute('data-mce-object');
739
if (objectType == "audio" || objectType == "script") {
744
editor.on('objectResized', function(e) {
745
var target = e.target, html;
747
if (target.getAttribute('data-mce-object')) {
748
html = target.getAttribute('data-mce-html');
750
html = unescape(html);
751
target.setAttribute('data-mce-html', escape(
761
editor.addButton('media', {
762
tooltip: 'Insert/edit video',
764
stateSelector: ['img[data-mce-object=video]', 'img[data-mce-object=iframe]']
767
editor.addMenuItem('media', {
769
text: 'Insert video',
772
prependToContext: true
added
removed
wp-includes/js/tinymce/plugins/media/plugin.js
