/**
* plugin.js
*
- * Copyright, Moxiecode Systems AB
* Released under LGPL License.
+ * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
*
* License: http://www.tinymce.com/license
* Contributing: http://www.tinymce.com/contributing
tinymce.PluginManager.add('media', function(editor, url) {
var urlPatterns = [
- {regex: /youtu\.be\/([\w\-.]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$1'},
- {regex: /youtube\.com(.+)v=([^&]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$2'},
- {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'},
- {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"'}
+ {regex: /youtu\.be\/([\w\-.]+)/, type: 'iframe', w: 560, h: 314, url: '//www.youtube.com/embed/$1', allowFullscreen: true},
+ {regex: /youtube\.com(.+)v=([^&]+)/, type: 'iframe', w: 560, h: 314, url: '//www.youtube.com/embed/$2', allowFullscreen: true},
+ {regex: /youtube.com\/embed\/([a-z0-9\-_]+)/i, type: 'iframe', w: 560, h: 314, url: '//www.youtube.com/embed/$1', allowFullscreen: true},
+ {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},
+ {regex: /vimeo\.com\/(.*)\/([0-9]+)/, type: "iframe", w: 425, h: 350, url: "//player.vimeo.com/video/$2?title=0&byline=0", allowfullscreen: true},
+ {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},
+ {regex: /dailymotion\.com\/video\/([^_]+)/, type: 'iframe', w: 480, h: 270, url: '//www.dailymotion.com/embed/video/$1', allowFullscreen: true}
];
+ var embedChange = (tinymce.Env.ie && tinymce.Env.ie <= 8) ? 'onChange' : 'onInput';
+
function guessMime(url) {
+ url = url.toLowerCase();
+
if (url.indexOf('.mp3') != -1) {
return 'audio/mpeg';
}
function showDialog() {
var win, width, height, data;
+
var generalFormItems = [
- {name: 'source1', type: 'filepicker', filetype: 'media', size: 40, autofocus: true, label: 'Source'}
+ {
+ name: 'source1',
+ type: 'filepicker',
+ filetype: 'media',
+ size: 40,
+ autofocus: true,
+ label: 'Source',
+ onchange: function(e) {
+ tinymce.each(e.meta, function(value, key) {
+ win.find('#' + key).value(value);
+ });
+ }
+ }
];
function recalcSize(e) {
if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
if (e.control == widthCtrl) {
newHeight = Math.round((newWidth / width) * newHeight);
- heightCtrl.value(newHeight);
+
+ if (!isNaN(newHeight)) {
+ heightCtrl.value(newHeight);
+ }
} else {
newWidth = Math.round((newHeight / height) * newWidth);
- widthCtrl.value(newWidth);
+
+ if (!isNaN(newWidth)) {
+ widthCtrl.value(newWidth);
+ }
}
}
align: 'center',
spacing: 5,
items: [
- {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
+ {name: 'width', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Width'},
{type: 'label', text: 'x'},
- {name: 'height', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
+ {name: 'height', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Height'},
{name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'}
]
});
width = data.width;
height = data.height;
+ var embedTextBox = {
+ id: 'mcemediasource',
+ type: 'textbox',
+ flex: 1,
+ name: 'embed',
+ value: getSource(),
+ multiline: true,
+ label: 'Source'
+ };
+
+ function updateValueOnChange() {
+ data = htmlToData(this.value());
+ this.parent().parent().fromJSON(data);
+ }
+
+ embedTextBox[embedChange] = updateValueOnChange;
+
win = editor.windowManager.open({
title: 'Insert/edit video',
data: data,
{
title: 'Embed',
- type: "panel",
+ type: "container",
layout: 'flex',
direction: 'column',
align: 'stretch',
text: 'Paste your embed code below:',
forId: 'mcemediasource'
},
- {
- id: 'mcemediasource',
- type: 'textbox',
- flex: 1,
- name: 'embed',
- value: getSource(),
- multiline: true,
- label: 'Source'
- }
+ embedTextBox
]
}
],
onSubmit: function() {
+ var beforeObjects, afterObjects, i, y;
+
+ beforeObjects = editor.dom.select('img[data-mce-object]');
editor.insertContent(dataToHtml(this.toJSON()));
+ afterObjects = editor.dom.select('img[data-mce-object]');
+
+ // Find new image placeholder so we can select it
+ for (i = 0; i < beforeObjects.length; i++) {
+ for (y = afterObjects.length - 1; y >= 0; y--) {
+ if (beforeObjects[i] == afterObjects[y]) {
+ afterObjects.splice(y, 1);
+ }
+ }
+ }
+
+ editor.selection.select(afterObjects[0]);
+ editor.nodeChanged();
}
});
}
data.poster = editor.convertURL(data.poster, "poster");
data.flashPlayerUrl = editor.convertURL(url + '/moxieplayer.swf', "movie");
- if (data.embed) {
- html = updateHtml(data.embed, data, true);
- } else {
- tinymce.each(urlPatterns, function(pattern) {
- var match, i, url;
+ tinymce.each(urlPatterns, function(pattern) {
+ var match, i, url;
- if ((match = pattern.regex.exec(data.source1))) {
- url = pattern.url;
+ if ((match = pattern.regex.exec(data.source1))) {
+ url = pattern.url;
- for (i = 0; match[i]; i++) {
- /*jshint loopfunc:true*/
- /*eslint no-loop-func:0 */
- url = url.replace('$' + i, function() {
- return match[i];
- });
- }
-
- data.source1 = url;
- data.type = pattern.type;
- data.width = data.width || pattern.w;
- data.height = data.height || pattern.h;
+ for (i = 0; match[i]; i++) {
+ /*jshint loopfunc:true*/
+ /*eslint no-loop-func:0 */
+ url = url.replace('$' + i, function() {
+ return match[i];
+ });
}
- });
+ data.source1 = url;
+ data.type = pattern.type;
+ data.allowFullscreen = pattern.allowFullscreen;
+ data.width = data.width || pattern.w;
+ data.height = data.height || pattern.h;
+ }
+ });
+
+ if (data.embed) {
+ html = updateHtml(data.embed, data, true);
+ } else {
var videoScript = getVideoScriptMatch(data.source1);
if (videoScript) {
data.type = 'script';
});
if (data.type == "iframe") {
- html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"></iframe>';
+ var allowFullscreen = data.allowFullscreen ? ' allowFullscreen="1"' : '';
+ html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"' + allowFullscreen + '></iframe>';
} else if (data.source1mime == "application/x-shockwave-flash") {
html += '<object data="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '" type="application/x-shockwave-flash">';
return {};
}
+ function sanitize(html) {
+ if (editor.settings.media_filter_html === false) {
+ return html;
+ }
+
+ var writer = new tinymce.html.Writer(), blocked;
+
+ new tinymce.html.SaxParser({
+ validate: false,
+ allow_conditional_comments: false,
+ special: 'script,noscript',
+
+ comment: function(text) {
+ writer.comment(text);
+ },
+
+ cdata: function(text) {
+ writer.cdata(text);
+ },
+
+ text: function(text, raw) {
+ writer.text(text, raw);
+ },
+
+ start: function(name, attrs, empty) {
+ blocked = true;
+
+ if (name == 'script' || name == 'noscript') {
+ return;
+ }
+
+ for (var i = 0; i < attrs.length; i++) {
+ if (attrs[i].name.indexOf('on') === 0) {
+ return;
+ }
+
+ if (attrs[i].name == 'style') {
+ attrs[i].value = editor.dom.serializeStyle(editor.dom.parseStyle(attrs[i].value), name);
+ }
+ }
+
+ writer.start(name, attrs, empty);
+ blocked = false;
+ },
+
+ end: function(name) {
+ if (blocked) {
+ return;
+ }
+
+ writer.end(name);
+ }
+ }, new tinymce.html.Schema({})).parse(html);
+
+ return writer.getContent();
+ }
+
function updateHtml(html, data, updateAll) {
var writer = new tinymce.html.Writer();
var sourceCount = 0, hasImage;
width: data.width,
height: data.height
});
- break;
+ break;
}
if (updateAll) {
src: ""
});
}
- break;
+ break;
case "iframe":
setAttributes(attrs, {
src: data.source1
});
- break;
+ break;
case "source":
sourceCount++;
return;
}
}
- break;
+ break;
case "img":
if (!data.poster) {
}
});
+ function retainAttributesAndInnerHtml(sourceNode, targetNode) {
+ var attrName, attrValue, attribs, ai, innerHtml;
+
+ // Prefix all attributes except width, height and style since we
+ // will add these to the placeholder
+ attribs = sourceNode.attributes;
+ ai = attribs.length;
+ while (ai--) {
+ attrName = attribs[ai].name;
+ attrValue = attribs[ai].value;
+
+ if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
+ if (attrName == "data" || attrName == "src") {
+ attrValue = editor.convertURL(attrValue, attrName);
+ }
+
+ targetNode.attr('data-mce-p-' + attrName, attrValue);
+ }
+ }
+
+ // Place the inner HTML contents inside an escaped attribute
+ // This enables us to copy/paste the fake object
+ innerHtml = sourceNode.firstChild && sourceNode.firstChild.value;
+ if (innerHtml) {
+ targetNode.attr("data-mce-html", escape(innerHtml));
+ targetNode.firstChild = null;
+ }
+ }
+
+ function createPlaceholderNode(node) {
+ var placeHolder, name = node.name;
+
+ placeHolder = new tinymce.html.Node('img', 1);
+ placeHolder.shortEnded = true;
+
+ retainAttributesAndInnerHtml(node, placeHolder);
+
+ placeHolder.attr({
+ width: node.attr('width') || "300",
+ height: node.attr('height') || (name == "audio" ? "30" : "150"),
+ style: node.attr('style'),
+ src: tinymce.Env.transparentSrc,
+ "data-mce-object": name,
+ "class": "mce-object mce-object-" + name
+ });
+
+ return placeHolder;
+ }
+
+ function createPreviewNode(node) {
+ var previewWrapper, previewNode, shimNode, name = node.name;
+
+ previewWrapper = new tinymce.html.Node('span', 1);
+ previewWrapper.attr({
+ contentEditable: 'false',
+ style: node.attr('style'),
+ "data-mce-object": name,
+ "class": "mce-preview-object mce-object-" + name
+ });
+
+ retainAttributesAndInnerHtml(node, previewWrapper);
+
+ previewNode = new tinymce.html.Node(name, 1);
+ previewNode.attr({
+ src: node.attr('src'),
+ allowfullscreen: node.attr('allowfullscreen'),
+ width: node.attr('width') || "300",
+ height: node.attr('height') || (name == "audio" ? "30" : "150"),
+ frameborder: '0'
+ });
+
+ shimNode = new tinymce.html.Node('span', 1);
+ shimNode.attr('class', 'mce-shim');
+
+ previewWrapper.append(previewNode);
+ previewWrapper.append(shimNode);
+
+ return previewWrapper;
+ }
+
editor.on('preInit', function() {
// Make sure that any messy HTML is retained inside these
var specialElements = editor.schema.getSpecialElements();
tinymce.each('video audio iframe object'.split(' '), function(name) {
- specialElements[name] = new RegExp('<\/' + name + '[^>]*>','gi');
+ specialElements[name] = new RegExp('<\/' + name + '[^>]*>', 'gi');
});
// Allow elements
- editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
+ //editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
// Set allowFullscreen attribs as boolean
var boolAttrs = editor.schema.getBoolAttrs();
});
// Converts iframe, video etc into placeholder images
- editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes, name) {
- var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
- var videoScript;
+ editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes) {
+ var i = nodes.length, node, placeHolder, videoScript;
while (i--) {
node = nodes[i];
+ if (!node.parent) {
+ continue;
+ }
+
+ if (node.parent.attr('data-mce-object')) {
+ continue;
+ }
if (node.name == 'script') {
videoScript = getVideoScriptMatch(node.attr('src'));
}
}
- placeHolder = new tinymce.html.Node('img', 1);
- placeHolder.shortEnded = true;
-
if (videoScript) {
if (videoScript.width) {
node.attr('width', videoScript.width.toString());
}
}
- // Prefix all attributes except width, height and style since we
- // will add these to the placeholder
- attribs = node.attributes;
- ai = attribs.length;
- while (ai--) {
- attrName = attribs[ai].name;
- attrValue = attribs[ai].value;
-
- if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
- if (attrName == "data" || attrName == "src") {
- attrValue = editor.convertURL(attrValue, attrName);
- }
-
- placeHolder.attr('data-mce-p-' + attrName, attrValue);
- }
- }
-
- // Place the inner HTML contents inside an escaped attribute
- // This enables us to copy/paste the fake object
- innerHtml = node.firstChild && node.firstChild.value;
- if (innerHtml) {
- placeHolder.attr("data-mce-html", escape(innerHtml));
- placeHolder.firstChild = null;
+ if (node.name == 'iframe' && editor.settings.media_live_embeds !== false && tinymce.Env.ceFalse) {
+ placeHolder = createPreviewNode(node);
+ } else {
+ placeHolder = createPlaceholderNode(node);
}
- placeHolder.attr({
- width: node.attr('width') || "300",
- height: node.attr('height') || (name == "audio" ? "30" : "150"),
- style: node.attr('style'),
- src: tinymce.Env.transparentSrc,
- "data-mce-object": name,
- "class": "mce-object mce-object-" + name
- });
-
node.replace(placeHolder);
}
});
// Replaces placeholder images with real elements for video, object, iframe etc
editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
- var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName;
+ var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName, className;
while (i--) {
node = nodes[i];
+ if (!node.parent) {
+ continue;
+ }
+
realElmName = node.attr(name);
realElm = new tinymce.html.Node(realElmName, 1);
// Add width/height to everything but audio
if (realElmName != "audio" && realElmName != "script") {
- realElm.attr({
- width: node.attr('width'),
- height: node.attr('height')
- });
+ className = node.attr('class');
+ if (className && className.indexOf('mce-preview-object') !== -1) {
+ realElm.attr({
+ width: node.firstChild.attr('width'),
+ height: node.firstChild.attr('height')
+ });
+ } else {
+ realElm.attr({
+ width: node.attr('width'),
+ height: node.attr('height')
+ });
+ }
}
realElm.attr({
if (innerHtml) {
innerNode = new tinymce.html.Node('#text', 3);
innerNode.raw = true;
- innerNode.value = unescape(innerHtml);
+ innerNode.value = sanitize(unescape(innerHtml));
realElm.append(innerNode);
}
});
});
+ editor.on('click keyup', function() {
+ var selectedNode = editor.selection.getNode();
+
+ if (selectedNode && editor.dom.hasClass(selectedNode, 'mce-preview-object')) {
+ if (editor.dom.getAttrib(selectedNode, 'data-mce-selected')) {
+ selectedNode.setAttribute('data-mce-selected', '2');
+ }
+ }
+ });
+
editor.on('ObjectSelected', function(e) {
var objectType = e.target.getAttribute('data-mce-object');
editor.addButton('media', {
tooltip: 'Insert/edit video',
onclick: showDialog,
- stateSelector: ['img[data-mce-object=video]', 'img[data-mce-object=iframe]']
+ stateSelector: ['img[data-mce-object]', 'span[data-mce-object]']
});
editor.addMenuItem('media', {
icon: 'media',
- text: 'Insert video',
+ text: 'Insert/edit video',
onclick: showDialog,
context: 'insert',
prependToContext: true
});
+
+ editor.on('setContent', function() {
+ // TODO: This shouldn't be needed there should be a way to mark bogus
+ // elements so they are never removed except external save
+ editor.$('span.mce-preview-object').each(function(index, elm) {
+ var $elm = editor.$(elm);
+
+ if ($elm.find('span.mce-shim', elm).length === 0) {
+ $elm.append('<span class="mce-shim"></span>');
+ }
+ });
+ });
+
+ editor.addCommand('mceMedia', showDialog);
+
+ this.showDialog = showDialog;
});
scripts.mit.edu / autoinstalls / wordpress.git / blobdiff