| | |
| | | ["Java", "8ad9c840-044e-11d1-b3e9-00805f499d93", "application/x-java-applet", "http://java.sun.com/products/plugin/autodl/jinstall-1_5_0-windows-i586.cab#Version=1,5,0,0"],
|
| | | ["Silverlight", "dfeaf541-f3e1-4c24-acac-99c30715084a", "application/x-silverlight-2"],
|
| | | ["Iframe"],
|
| | | ["Video"]
|
| | | ["Video"],
|
| | | ["EmbeddedAudio"],
|
| | | ["Audio"]
|
| | | ];
|
| | |
|
| | | function normalizeSize(size) {
|
| | | return typeof(size) == "string" ? size.replace(/[^0-9%]/g, '') : size;
|
| | | }
|
| | |
|
| | | function toArray(obj) {
|
| | | var undef, out, i;
|
| | |
| | | "silverlight=xap;" +
|
| | | "flash=swf,flv;" +
|
| | | "shockwave=dcr;" +
|
| | | "quicktime=mov,qt,mpg,mp3,mpeg;" +
|
| | | "quicktime=mov,qt,mpg,mpeg;" +
|
| | | "shockwave=dcr;" +
|
| | | "windowsmedia=avi,wmv,wm,asf,asx,wmx,wvx;" +
|
| | | "realmedia=rm,ra,ram;" +
|
| | | "java=jar"
|
| | | "java=jar;" +
|
| | | "audio=mp3,ogg"
|
| | | ).split(';'), function(item) {
|
| | | var i, extensions, type;
|
| | |
|
| | |
| | |
|
| | | img = ed.selection.getNode();
|
| | | if (isMediaImg(img)) {
|
| | | data = JSON.parse(ed.dom.getAttrib(img, 'data-mce-json'));
|
| | | data = ed.dom.getAttrib(img, 'data-mce-json');
|
| | | if (data) {
|
| | | data = JSON.parse(data);
|
| | |
|
| | | // Add some extra properties to the data object
|
| | | tinymce.each(rootAttributes, function(name) {
|
| | | var value = ed.dom.getAttrib(img, name);
|
| | | // Add some extra properties to the data object
|
| | | tinymce.each(rootAttributes, function(name) {
|
| | | var value = ed.dom.getAttrib(img, name);
|
| | |
|
| | | if (value)
|
| | | data[name] = value;
|
| | | });
|
| | | if (value)
|
| | | data[name] = value;
|
| | | });
|
| | |
|
| | | data.type = self.getType(img.className).name.toLowerCase();
|
| | | data.type = self.getType(img.className).name.toLowerCase();
|
| | | }
|
| | | }
|
| | |
|
| | | if (!data) {
|
| | |
| | | id : data.id,
|
| | | style : data.style,
|
| | | align : data.align,
|
| | | hspace : data.hspace,
|
| | | vspace : data.vspace,
|
| | | src : self.editor.theme.url + '/img/trans.gif',
|
| | | 'class' : 'mceItemMedia mceItem' + self.getType(data.type).name,
|
| | | 'data-mce-json' : JSON.serialize(data, "'")
|
| | | });
|
| | |
|
| | | img.width = data.width || "320";
|
| | | img.height = data.height || "240";
|
| | | img.width = data.width = normalizeSize(data.width || (data.type == 'audio' ? "300" : "320"));
|
| | | img.height = data.height = normalizeSize(data.height || (data.type == 'audio' ? "32" : "240"));
|
| | |
|
| | | return img;
|
| | | },
|
| | |
| | | * Converts the JSON data object to a HTML string.
|
| | | */
|
| | | dataToHtml : function(data, force_absolute) {
|
| | | return this.editor.serializer.serialize(this.dataToImg(data, force_absolute), {force_absolute : force_absolute});
|
| | | return this.editor.serializer.serialize(this.dataToImg(data, force_absolute), {forced_root_block : '', force_absolute : force_absolute});
|
| | | },
|
| | |
|
| | | /**
|
| | |
| | | imgToObject : function(node, args) {
|
| | | var self = this, editor = self.editor, video, object, embed, iframe, name, value, data,
|
| | | source, sources, params, param, typeItem, i, item, mp4Source, replacement,
|
| | | posterSrc, style;
|
| | | posterSrc, style, audio;
|
| | |
|
| | | // Adds the flash player
|
| | | function addPlayer(video_src, poster_src) {
|
| | |
| | | }
|
| | | };
|
| | |
|
| | | data = JSON.parse(node.attr('data-mce-json'));
|
| | | data = node.attr('data-mce-json');
|
| | | if (!data)
|
| | | return;
|
| | |
|
| | | data = JSON.parse(data);
|
| | | typeItem = this.getType(node.attr('class'));
|
| | |
|
| | | style = node.attr('data-mce-style')
|
| | | style = node.attr('data-mce-style');
|
| | | if (!style) {
|
| | | style = node.attr('style');
|
| | |
|
| | | if (style)
|
| | | style = editor.dom.serializeStyle(editor.dom.parseStyle(style, 'img'));
|
| | | }
|
| | |
|
| | | // Use node width/height to override the data width/height when the placeholder is resized
|
| | | data.width = node.attr('width') || data.width;
|
| | | data.height = node.attr('height') || data.height;
|
| | |
|
| | | // Handle iframe
|
| | | if (typeItem.name === 'Iframe') {
|
| | |
| | | // Create new object element
|
| | | video = new Node('video', 1).attr(tinymce.extend({
|
| | | id : node.attr('id'),
|
| | | width: node.attr('width'),
|
| | | height: node.attr('height'),
|
| | | width: normalizeSize(node.attr('width')),
|
| | | height: normalizeSize(node.attr('height')),
|
| | | style : style
|
| | | }, data.video.attrs));
|
| | |
|
| | |
| | | data.params.src = '';
|
| | | }
|
| | |
|
| | | // Add HTML5 audio element
|
| | | if (typeItem.name === 'Audio' && data.video.sources[0]) {
|
| | | // Create new object element
|
| | | audio = new Node('audio', 1).attr(tinymce.extend({
|
| | | id : node.attr('id'),
|
| | | width: normalizeSize(node.attr('width')),
|
| | | height: normalizeSize(node.attr('height')),
|
| | | style : style
|
| | | }, data.video.attrs));
|
| | |
|
| | | // Get poster source and use that for flash fallback
|
| | | if (data.video.attrs)
|
| | | posterSrc = data.video.attrs.poster;
|
| | |
|
| | | sources = data.video.sources = toArray(data.video.sources);
|
| | | if (!sources[0].type) {
|
| | | audio.attr('src', sources[0].src);
|
| | | sources.splice(0, 1);
|
| | | }
|
| | |
|
| | | for (i = 0; i < sources.length; i++) {
|
| | | source = new Node('source', 1).attr(sources[i]);
|
| | | source.shortEnded = true;
|
| | | audio.append(source);
|
| | | }
|
| | |
|
| | | data.params.src = '';
|
| | | }
|
| | |
|
| | | if (typeItem.name === 'EmbeddedAudio') {
|
| | | embed = new Node('embed', 1);
|
| | | embed.shortEnded = true;
|
| | | embed.attr({
|
| | | id: node.attr('id'),
|
| | | width: normalizeSize(node.attr('width')),
|
| | | height: normalizeSize(node.attr('height')),
|
| | | style : style,
|
| | | type: node.attr('type')
|
| | | });
|
| | |
|
| | | for (name in data.params)
|
| | | embed.attr(name, data.params[name]);
|
| | |
|
| | | tinymce.each(rootAttributes, function(name) {
|
| | | if (data[name] && name != 'type')
|
| | | embed.attr(name, data[name]);
|
| | | });
|
| | |
|
| | | data.params.src = '';
|
| | | }
|
| | |
|
| | | // Do we have a params src then we can generate object
|
| | | if (data.params.src) {
|
| | | // Is flv movie add player for it
|
| | |
| | | // Create new object element
|
| | | object = new Node('object', 1).attr({
|
| | | id : node.attr('id'),
|
| | | width: node.attr('width'),
|
| | | height: node.attr('height'),
|
| | | width: normalizeSize(node.attr('width')),
|
| | | height: normalizeSize(node.attr('height')),
|
| | | style : style
|
| | | });
|
| | |
|
| | | tinymce.each(rootAttributes, function(name) {
|
| | | if (data[name] && name != 'type')
|
| | | object.attr(name, data[name]);
|
| | | var value = data[name];
|
| | |
|
| | | if (name == 'class' && value)
|
| | | value = value.replace(/mceItem.+ ?/g, '');
|
| | |
|
| | | if (value && name != 'type')
|
| | | object.attr(name, value);
|
| | | });
|
| | |
|
| | | // Add params
|
| | |
| | | embed.shortEnded = true;
|
| | | embed.attr({
|
| | | id: node.attr('id'),
|
| | | width: node.attr('width'),
|
| | | height: node.attr('height'),
|
| | | width: normalizeSize(node.attr('width')),
|
| | | height: normalizeSize(node.attr('height')),
|
| | | style : style,
|
| | | type: typeItem.mimes[0]
|
| | | });
|
| | |
| | | }
|
| | | }
|
| | |
|
| | | if (video || object)
|
| | | node.replace(video || object);
|
| | | if (audio) {
|
| | | // Insert raw HTML
|
| | | if (data.video_html) {
|
| | | value = new Node('#text', 3);
|
| | | value.raw = true;
|
| | | value.value = data.video_html;
|
| | | audio.append(value);
|
| | | }
|
| | | }
|
| | |
|
| | | var n = video || audio || object || embed;
|
| | | if (n)
|
| | | node.replace(n);
|
| | | else
|
| | | node.remove();
|
| | | },
|
| | |
| | | var object, embed, video, iframe, img, name, id, width, height, style, i, html,
|
| | | param, params, source, sources, data, type, lookup = this.lookup,
|
| | | matches, attrs, urlConverter = this.editor.settings.url_converter,
|
| | | urlConverterScope = this.editor.settings.url_converter_scope;
|
| | | urlConverterScope = this.editor.settings.url_converter_scope,
|
| | | hspace, vspace, align, bgcolor;
|
| | |
|
| | | function getInnerHTML(node) {
|
| | | return new tinymce.html.Serializer({
|
| | |
| | | validate: false
|
| | | }).serialize(node);
|
| | | };
|
| | |
|
| | | function lookupAttribute(o, attr) {
|
| | | return lookup[(o.attr(attr) || '').toLowerCase()];
|
| | | }
|
| | |
|
| | | function lookupExtension(src) {
|
| | | var ext = src.replace(/^.*\.([^.]+)$/, '$1');
|
| | | return lookup[ext.toLowerCase() || ''];
|
| | | }
|
| | |
|
| | | // If node isn't in document
|
| | | if (!node.parent)
|
| | |
| | |
|
| | | // Video element
|
| | | name = node.name;
|
| | | if (name === 'video') {
|
| | | if (name === 'video' || name == 'audio') {
|
| | | video = node;
|
| | | object = node.getAll('object')[0];
|
| | | embed = node.getAll('embed')[0];
|
| | |
| | |
|
| | | source = node.attr('src');
|
| | | if (source)
|
| | | data.video.sources.push({src : urlConverter.call(urlConverterScope, source, 'src', 'video')});
|
| | | data.video.sources.push({src : urlConverter.call(urlConverterScope, source, 'src', node.name)});
|
| | |
|
| | | // Get all sources
|
| | | sources = video.getAll("source");
|
| | |
| | |
|
| | | // Convert the poster URL
|
| | | if (attrs.poster)
|
| | | attrs.poster = urlConverter.call(urlConverterScope, attrs.poster, 'poster', 'video');
|
| | | attrs.poster = urlConverter.call(urlConverterScope, attrs.poster, 'poster', node.name);
|
| | | }
|
| | |
|
| | | // Object element
|
| | |
| | | height = height || object.attr('height');
|
| | | style = style || object.attr('style');
|
| | | id = id || object.attr('id');
|
| | | hspace = hspace || object.attr('hspace');
|
| | | vspace = vspace || object.attr('vspace');
|
| | | align = align || object.attr('align');
|
| | | bgcolor = bgcolor || object.attr('bgcolor');
|
| | | data.name = object.attr('name');
|
| | |
|
| | | // Get all object params
|
| | | params = object.getAll("param");
|
| | |
| | | height = height || embed.attr('height');
|
| | | style = style || embed.attr('style');
|
| | | id = id || embed.attr('id');
|
| | | hspace = hspace || embed.attr('hspace');
|
| | | vspace = vspace || embed.attr('vspace');
|
| | | align = align || embed.attr('align');
|
| | | bgcolor = bgcolor || embed.attr('bgcolor');
|
| | |
|
| | | // Get all embed attributes
|
| | | for (name in embed.attributes.map) {
|
| | |
| | |
|
| | | if (iframe) {
|
| | | // Get width/height
|
| | | width = iframe.attr('width');
|
| | | height = iframe.attr('height');
|
| | | width = normalizeSize(iframe.attr('width'));
|
| | | height = normalizeSize(iframe.attr('height'));
|
| | | style = style || iframe.attr('style');
|
| | | id = iframe.attr('id');
|
| | | hspace = iframe.attr('hspace');
|
| | | vspace = iframe.attr('vspace');
|
| | | align = iframe.attr('align');
|
| | | bgcolor = iframe.attr('bgcolor');
|
| | |
|
| | | tinymce.each(rootAttributes, function(name) {
|
| | | img.attr(name, iframe.attr(name));
|
| | |
| | | if (data.params.src)
|
| | | data.params.src = urlConverter.call(urlConverterScope, data.params.src, 'src', 'object');
|
| | |
|
| | | if (video)
|
| | | type = lookup.video.name;
|
| | | if (video) {
|
| | | if (node.name === 'video')
|
| | | type = lookup.video.name;
|
| | | else if (node.name === 'audio')
|
| | | type = lookup.audio.name;
|
| | | }
|
| | |
|
| | | if (object && !type)
|
| | | type = (lookup[(object.attr('clsid') || '').toLowerCase()] || lookup[(object.attr('type') || '').toLowerCase()] || {}).name;
|
| | | type = (lookupAttribute(object, 'clsid') || lookupAttribute(object, 'classid') || lookupAttribute(object, 'type') || {}).name;
|
| | |
|
| | | if (embed && !type)
|
| | | type = (lookup[(embed.attr('type') || '').toLowerCase()] || {}).name;
|
| | | type = (lookupAttribute(embed, 'type') || lookupExtension(data.params.src) || {}).name;
|
| | |
|
| | | // for embedded audio we preserve the original specified type
|
| | | if (embed && type == 'EmbeddedAudio') {
|
| | | data.params.type = embed.attr('type');
|
| | | }
|
| | |
|
| | | // Replace the video/object/embed element with a placeholder image containing the data
|
| | | node.replace(img);
|
| | |
| | | data.video_html = html;
|
| | | }
|
| | |
|
| | | data.hspace = hspace;
|
| | | data.vspace = vspace;
|
| | | data.align = align;
|
| | | data.bgcolor = bgcolor;
|
| | |
|
| | | // Set width/height of placeholder
|
| | | img.attr({
|
| | | id : id,
|
| | | 'class' : 'mceItemMedia mceItem' + (type || 'Flash'),
|
| | | style : style,
|
| | | width : width || "320",
|
| | | height : height || "240",
|
| | | width : width || (node.name == 'audio' ? "300" : "320"),
|
| | | height : height || (node.name == 'audio' ? "32" : "240"),
|
| | | hspace : hspace,
|
| | | vspace : vspace,
|
| | | align : align,
|
| | | bgcolor : bgcolor,
|
| | | "data-mce-json" : JSON.serialize(data, "'")
|
| | | });
|
| | | }
|
| | |
| | |
|
| | | // Register plugin
|
| | | tinymce.PluginManager.add('media', tinymce.plugins.MediaPlugin);
|
| | | })(); |
| | | })();
|