*/\r
\r
(function() {\r
- var each = tinymce.each;\r
+ var rootAttributes = tinymce.explode('id,name,width,height,style,align,class,hspace,vspace,bgcolor,type'), excludedAttrs = tinymce.makeMap(rootAttributes.join(',')), Node = tinymce.html.Node,\r
+ mediaTypes, scriptRegExp, JSON = tinymce.util.JSON, mimeTypes;\r
+\r
+ // Media types supported by this plugin\r
+ mediaTypes = [\r
+ // Type, clsid:s, mime types, codebase\r
+ ["Flash", "d27cdb6e-ae6d-11cf-96b8-444553540000", "application/x-shockwave-flash", "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"],\r
+ ["ShockWave", "166b1bca-3f9c-11cf-8075-444553540000", "application/x-director", "http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,1,0"],\r
+ ["WindowsMedia", "6bf52a52-394a-11d3-b153-00c04f79faa6,22d6f312-b0f6-11d0-94ab-0080c74c7e95,05589fa1-c356-11ce-bf01-00aa0055595a", "application/x-mplayer2", "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"],\r
+ ["QuickTime", "02bf25d5-8c17-4b23-bc80-d3488abddc6b", "video/quicktime", "http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"],\r
+ ["RealMedia", "cfcdaa03-8be4-11cf-b84b-0020afbbccfa", "audio/x-pn-realaudio-plugin", "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"],\r
+ ["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"],\r
+ ["Silverlight", "dfeaf541-f3e1-4c24-acac-99c30715084a", "application/x-silverlight-2"],\r
+ ["Iframe"],\r
+ ["Video"],\r
+ ["Audio"]\r
+ ];\r
+\r
+ function toArray(obj) {\r
+ var undef, out, i;\r
+\r
+ if (obj && !obj.splice) {\r
+ out = [];\r
+\r
+ for (i = 0; true; i++) {\r
+ if (obj[i])\r
+ out[i] = obj[i];\r
+ else\r
+ break;\r
+ }\r
+\r
+ return out;\r
+ }\r
+\r
+ return obj;\r
+ };\r
\r
tinymce.create('tinymce.plugins.MediaPlugin', {\r
init : function(ed, url) {\r
- var t = this;\r
- \r
- t.editor = ed;\r
- t.url = url;\r
+ var self = this, lookup = {}, i, y, item, name;\r
\r
- function isMediaElm(n) {\r
- return /^(mceItemFlash|mceItemShockWave|mceItemWindowsMedia|mceItemQuickTime|mceItemRealMedia)$/.test(n.className);\r
+ function isMediaImg(node) {\r
+ return node && node.nodeName === 'IMG' && ed.dom.hasClass(node, 'mceItemMedia');\r
};\r
\r
- ed.onPreInit.add(function() {\r
- // Force in _value parameter this extra parameter is required for older Opera versions\r
- ed.serializer.addRules('param[name|value|_mce_value]');\r
- });\r
+ self.editor = ed;\r
+ self.url = url;\r
\r
- // Register commands\r
- ed.addCommand('mceMedia', function() {\r
- ed.windowManager.open({\r
- file : url + '/media.htm',\r
- width : 430 + parseInt(ed.getLang('media.delta_width', 0)),\r
- height : 470 + parseInt(ed.getLang('media.delta_height', 0)),\r
- inline : 1\r
- }, {\r
- plugin_url : url\r
- });\r
- });\r
+ // Parse media types into a lookup table\r
+ scriptRegExp = '';\r
+ for (i = 0; i < mediaTypes.length; i++) {\r
+ name = mediaTypes[i][0];\r
\r
- // Register buttons\r
- ed.addButton('media', {title : 'media.desc', cmd : 'mceMedia'});\r
+ item = {\r
+ name : name,\r
+ clsids : tinymce.explode(mediaTypes[i][1] || ''),\r
+ mimes : tinymce.explode(mediaTypes[i][2] || ''),\r
+ codebase : mediaTypes[i][3]\r
+ };\r
+\r
+ for (y = 0; y < item.clsids.length; y++)\r
+ lookup['clsid:' + item.clsids[y]] = item;\r
+\r
+ for (y = 0; y < item.mimes.length; y++)\r
+ lookup[item.mimes[y]] = item;\r
\r
- ed.onNodeChange.add(function(ed, cm, n) {\r
- cm.setActive('media', n.nodeName == 'IMG' && isMediaElm(n));\r
+ lookup['mceItem' + name] = item;\r
+ lookup[name.toLowerCase()] = item;\r
+\r
+ scriptRegExp += (scriptRegExp ? '|' : '') + name;\r
+ }\r
+\r
+ // Handle the media_types setting\r
+ tinymce.each(ed.getParam("media_types",\r
+ "video=mp4,m4v,ogv,webm;" +\r
+ "silverlight=xap;" +\r
+ "flash=swf,flv;" +\r
+ "shockwave=dcr;" +\r
+ "quicktime=mov,qt,mpg,mpeg;" +\r
+ "shockwave=dcr;" +\r
+ "windowsmedia=avi,wmv,wm,asf,asx,wmx,wvx;" +\r
+ "realmedia=rm,ra,ram;" +\r
+ "java=jar;" +\r
+ "audio=mp3,ogg"\r
+ ).split(';'), function(item) {\r
+ var i, extensions, type;\r
+\r
+ item = item.split(/=/);\r
+ extensions = tinymce.explode(item[1].toLowerCase());\r
+ for (i = 0; i < extensions.length; i++) {\r
+ type = lookup[item[0].toLowerCase()];\r
+\r
+ if (type)\r
+ lookup[extensions[i]] = type;\r
+ }\r
});\r
\r
- ed.onInit.add(function() {\r
- var lo = {\r
- mceItemFlash : 'flash',\r
- mceItemShockWave : 'shockwave',\r
- mceItemWindowsMedia : 'windowsmedia',\r
- mceItemQuickTime : 'quicktime',\r
- mceItemRealMedia : 'realmedia'\r
- };\r
+ scriptRegExp = new RegExp('write(' + scriptRegExp + ')\\(([^)]+)\\)');\r
+ self.lookup = lookup;\r
+\r
+ ed.onPreInit.add(function() {\r
+ // Allow video elements\r
+ ed.schema.addValidElements('object[id|style|width|height|classid|codebase|*],param[name|value],embed[id|style|width|height|type|src|*],video[*],audio[*],source[*]');\r
\r
- ed.selection.onSetContent.add(function() {\r
- t._spansToImgs(ed.getBody());\r
+ // Convert video elements to image placeholder\r
+ ed.parser.addNodeFilter('object,embed,video,audio,script,iframe', function(nodes) {\r
+ var i = nodes.length;\r
+\r
+ while (i--)\r
+ self.objectToImg(nodes[i]);\r
});\r
\r
- ed.selection.onBeforeSetContent.add(t._objectsToSpans, t);\r
+ // Convert image placeholders to video elements\r
+ ed.serializer.addNodeFilter('img', function(nodes, name, args) {\r
+ var i = nodes.length, node;\r
\r
- if (ed.settings.content_css !== false)\r
- ed.dom.loadCSS(url + "/css/content.css");\r
+ while (i--) {\r
+ node = nodes[i];\r
+ if ((node.attr('class') || '').indexOf('mceItemMedia') !== -1)\r
+ self.imgToObject(node, args);\r
+ }\r
+ });\r
+ });\r
\r
+ ed.onInit.add(function() {\r
+ // Display "media" instead of "img" in element path\r
if (ed.theme && ed.theme.onResolveName) {\r
- ed.theme.onResolveName.add(function(th, o) {\r
- if (o.name == 'img') {\r
- each(lo, function(v, k) {\r
- if (ed.dom.hasClass(o.node, k)) {\r
- o.name = v;\r
- o.title = ed.dom.getAttrib(o.node, 'title');\r
- return false;\r
- }\r
- });\r
- }\r
+ ed.theme.onResolveName.add(function(theme, path_object) {\r
+ if (path_object.name === 'img' && ed.dom.hasClass(path_object.node, 'mceItemMedia'))\r
+ path_object.name = 'media';\r
});\r
}\r
\r
+ // Add contect menu if it's loaded\r
if (ed && ed.plugins.contextmenu) {\r
- ed.plugins.contextmenu.onContextMenu.add(function(th, m, e) {\r
- if (e.nodeName == 'IMG' && /mceItem(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)/.test(e.className)) {\r
- m.add({title : 'media.edit', icon : 'media', cmd : 'mceMedia'});\r
- }\r
+ ed.plugins.contextmenu.onContextMenu.add(function(plugin, menu, element) {\r
+ if (element.nodeName === 'IMG' && element.className.indexOf('mceItemMedia') !== -1)\r
+ menu.add({title : 'media.edit', icon : 'media', cmd : 'mceMedia'});\r
});\r
}\r
});\r
\r
- ed.onBeforeSetContent.add(t._objectsToSpans, t);\r
-\r
- ed.onSetContent.add(function() {\r
- t._spansToImgs(ed.getBody());\r
- });\r
+ // Register commands\r
+ ed.addCommand('mceMedia', function() {\r
+ var data, img;\r
\r
- ed.onPreProcess.add(function(ed, o) {\r
- var dom = ed.dom;\r
+ img = ed.selection.getNode();\r
+ if (isMediaImg(img)) {\r
+ data = ed.dom.getAttrib(img, 'data-mce-json');\r
+ if (data) {\r
+ data = JSON.parse(data);\r
\r
- if (o.set) {\r
- t._spansToImgs(o.node);\r
+ // Add some extra properties to the data object\r
+ tinymce.each(rootAttributes, function(name) {\r
+ var value = ed.dom.getAttrib(img, name);\r
\r
- each(dom.select('IMG', o.node), function(n) {\r
- var p;\r
+ if (value)\r
+ data[name] = value;\r
+ });\r
\r
- if (isMediaElm(n)) {\r
- p = t._parse(n.title);\r
- dom.setAttrib(n, 'width', dom.getAttrib(n, 'width', p.width || 100));\r
- dom.setAttrib(n, 'height', dom.getAttrib(n, 'height', p.height || 100));\r
- }\r
- });\r
+ data.type = self.getType(img.className).name.toLowerCase();\r
+ }\r
}\r
\r
- if (o.get) {\r
- each(dom.select('IMG', o.node), function(n) {\r
- var ci, cb, mt;\r
-\r
- if (ed.getParam('media_use_script')) {\r
- if (isMediaElm(n))\r
- n.className = n.className.replace(/mceItem/g, 'mceTemp');\r
-\r
- return;\r
- }\r
-\r
- switch (n.className) {\r
- case 'mceItemFlash':\r
- ci = 'd27cdb6e-ae6d-11cf-96b8-444553540000';\r
- cb = 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0';\r
- mt = 'application/x-shockwave-flash';\r
- break;\r
-\r
- case 'mceItemShockWave':\r
- ci = '166b1bca-3f9c-11cf-8075-444553540000';\r
- cb = 'http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,1,0';\r
- mt = 'application/x-director';\r
- break;\r
-\r
- case 'mceItemWindowsMedia':\r
- ci = ed.getParam('media_wmp6_compatible') ? '05589fa1-c356-11ce-bf01-00aa0055595a' : '6bf52a52-394a-11d3-b153-00c04f79faa6';\r
- cb = 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701';\r
- mt = 'application/x-mplayer2';\r
- break;\r
-\r
- case 'mceItemQuickTime':\r
- ci = '02bf25d5-8c17-4b23-bc80-d3488abddc6b';\r
- cb = 'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0';\r
- mt = 'video/quicktime';\r
- break;\r
-\r
- case 'mceItemRealMedia':\r
- ci = 'cfcdaa03-8be4-11cf-b84b-0020afbbccfa';\r
- cb = 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0';\r
- mt = 'audio/x-pn-realaudio-plugin';\r
- break;\r
- }\r
-\r
- if (ci) {\r
- dom.replace(t._buildObj({\r
- classid : ci,\r
- codebase : cb,\r
- type : mt\r
- }, n), n);\r
- }\r
- });\r
+ if (!data) {\r
+ data = {\r
+ type : 'flash',\r
+ video: {sources:[]},\r
+ params: {}\r
+ };\r
}\r
- });\r
\r
- ed.onPostProcess.add(function(ed, o) {\r
- o.content = o.content.replace(/_mce_value=/g, 'value=');\r
+ ed.windowManager.open({\r
+ file : url + '/media.htm',\r
+ width : 430 + parseInt(ed.getLang('media.delta_width', 0)),\r
+ height : 500 + parseInt(ed.getLang('media.delta_height', 0)),\r
+ inline : 1\r
+ }, {\r
+ plugin_url : url,\r
+ data : data\r
+ });\r
});\r
\r
- function getAttr(s, n) {\r
- n = new RegExp(n + '=\"([^\"]+)\"', 'g').exec(s);\r
+ // Register buttons\r
+ ed.addButton('media', {title : 'media.desc', cmd : 'mceMedia'});\r
\r
- return n ? ed.dom.decode(n[1]) : '';\r
- };\r
+ // Update media selection status\r
+ ed.onNodeChange.add(function(ed, cm, node) {\r
+ cm.setActive('media', isMediaImg(node));\r
+ });\r
+ },\r
\r
- ed.onPostProcess.add(function(ed, o) {\r
- if (ed.getParam('media_use_script')) {\r
- o.content = o.content.replace(/<img[^>]+>/g, function(im) {\r
- var cl = getAttr(im, 'class');\r
+ convertUrl : function(url, force_absolute) {\r
+ var self = this, editor = self.editor, settings = editor.settings,\r
+ urlConverter = settings.url_converter,\r
+ urlConverterScope = settings.url_converter_scope || self;\r
\r
- if (/^(mceTempFlash|mceTempShockWave|mceTempWindowsMedia|mceTempQuickTime|mceTempRealMedia)$/.test(cl)) {\r
- at = t._parse(getAttr(im, 'title'));\r
- at.width = getAttr(im, 'width');\r
- at.height = getAttr(im, 'height');\r
- im = '<script type="text/javascript">write' + cl.substring(7) + '({' + t._serialize(at) + '});</script>';\r
- }\r
+ if (!url)\r
+ return url;\r
\r
- return im;\r
- });\r
- }\r
- });\r
+ if (force_absolute)\r
+ return editor.documentBaseURI.toAbsolute(url);\r
+\r
+ return urlConverter.call(urlConverterScope, url, 'src', 'object');\r
},\r
\r
getInfo : function() {\r
};\r
},\r
\r
- // Private methods\r
- _objectsToSpans : function(ed, o) {\r
- var t = this, h = o.content;\r
+ /**\r
+ * Converts the JSON data object to an img node.\r
+ */\r
+ dataToImg : function(data, force_absolute) {\r
+ var self = this, editor = self.editor, baseUri = editor.documentBaseURI, sources, attrs, img, i;\r
+\r
+ data.params.src = self.convertUrl(data.params.src, force_absolute);\r
\r
- h = h.replace(/<script[^>]*>\s*write(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)\(\{([^\)]*)\}\);\s*<\/script>/gi, function(a, b, c) {\r
- var o = t._parse(c);\r
+ attrs = data.video.attrs;\r
+ if (attrs)\r
+ attrs.src = self.convertUrl(attrs.src, force_absolute);\r
+\r
+ if (attrs)\r
+ attrs.poster = self.convertUrl(attrs.poster, force_absolute);\r
+\r
+ sources = toArray(data.video.sources);\r
+ if (sources) {\r
+ for (i = 0; i < sources.length; i++)\r
+ sources[i].src = self.convertUrl(sources[i].src, force_absolute);\r
+ }\r
\r
- return '<img class="mceItem' + b + '" title="' + ed.dom.encode(c) + '" src="' + t.url + '/img/trans.gif" width="' + o.width + '" height="' + o.height + '" />'\r
+ img = self.editor.dom.create('img', {\r
+ id : data.id,\r
+ style : data.style,\r
+ align : data.align,\r
+ src : self.editor.theme.url + '/img/trans.gif',\r
+ 'class' : 'mceItemMedia mceItem' + self.getType(data.type).name,\r
+ 'data-mce-json' : JSON.serialize(data, "'")\r
});\r
\r
- h = h.replace(/<object([^>]*)>/gi, '<span class="mceItemObject" $1>');\r
- h = h.replace(/<embed([^>]*)\/?>/gi, '<span class="mceItemEmbed" $1></span>');\r
- h = h.replace(/<embed([^>]*)>/gi, '<span class="mceItemEmbed" $1>');\r
- h = h.replace(/<\/(object)([^>]*)>/gi, '</span>');\r
- h = h.replace(/<\/embed>/gi, '');\r
- h = h.replace(/<param([^>]*)>/gi, function(a, b) {return '<span ' + b.replace(/value=/gi, '_mce_value=') + ' class="mceItemParam"></span>'});\r
- h = h.replace(/\/ class=\"mceItemParam\"><\/span>/gi, 'class="mceItemParam"></span>');\r
+ img.width = data.width || (data.type == 'audio' ? "300" : "320");\r
+ img.height = data.height || (data.type == 'audio' ? "32" : "240");\r
\r
- o.content = h;\r
+ return img;\r
},\r
\r
- _buildObj : function(o, n) {\r
- var ob, ed = this.editor, dom = ed.dom, p = this._parse(n.title), stc;\r
- \r
- stc = ed.getParam('media_strict', true) && o.type == 'application/x-shockwave-flash';\r
-\r
- p.width = o.width = dom.getAttrib(n, 'width') || 100;\r
- p.height = o.height = dom.getAttrib(n, 'height') || 100;\r
-\r
- if (p.src)\r
- p.src = ed.convertURL(p.src, 'src', n);\r
-\r
- if (stc) {\r
- ob = dom.create('span', {\r
- id : p.id,\r
- _mce_name : 'object',\r
- type : 'application/x-shockwave-flash',\r
- data : p.src,\r
- style : dom.getAttrib(n, 'style'),\r
- width : o.width,\r
- height : o.height\r
+ /**\r
+ * Converts the JSON data object to a HTML string.\r
+ */\r
+ dataToHtml : function(data, force_absolute) {\r
+ return this.editor.serializer.serialize(this.dataToImg(data, force_absolute), {forced_root_block : '', force_absolute : force_absolute});\r
+ },\r
+\r
+ /**\r
+ * Converts the JSON data object to a HTML string.\r
+ */\r
+ htmlToData : function(html) {\r
+ var fragment, img, data;\r
+\r
+ data = {\r
+ type : 'flash',\r
+ video: {sources:[]},\r
+ params: {}\r
+ };\r
+\r
+ fragment = this.editor.parser.parse(html);\r
+ img = fragment.getAll('img')[0];\r
+\r
+ if (img) {\r
+ data = JSON.parse(img.attr('data-mce-json'));\r
+ data.type = this.getType(img.attr('class')).name.toLowerCase();\r
+\r
+ // Add some extra properties to the data object\r
+ tinymce.each(rootAttributes, function(name) {\r
+ var value = img.attr(name);\r
+\r
+ if (value)\r
+ data[name] = value;\r
+ });\r
+ }\r
+\r
+ return data;\r
+ },\r
+\r
+ /**\r
+ * Get type item by extension, class, clsid or mime type.\r
+ *\r
+ * @method getType\r
+ * @param {String} value Value to get type item by.\r
+ * @return {Object} Type item object or undefined.\r
+ */\r
+ getType : function(value) {\r
+ var i, values, typeItem;\r
+\r
+ // Find type by checking the classes\r
+ values = tinymce.explode(value, ' ');\r
+ for (i = 0; i < values.length; i++) {\r
+ typeItem = this.lookup[values[i]];\r
+\r
+ if (typeItem)\r
+ return typeItem;\r
+ }\r
+ },\r
+\r
+ /**\r
+ * Converts a tinymce.html.Node image element to video/object/embed.\r
+ */\r
+ imgToObject : function(node, args) {\r
+ var self = this, editor = self.editor, video, object, embed, iframe, name, value, data,\r
+ source, sources, params, param, typeItem, i, item, mp4Source, replacement,\r
+ posterSrc, style, audio;\r
+\r
+ // Adds the flash player\r
+ function addPlayer(video_src, poster_src) {\r
+ var baseUri, flashVars, flashVarsOutput, params, flashPlayer;\r
+\r
+ flashPlayer = editor.getParam('flash_video_player_url', self.convertUrl(self.url + '/moxieplayer.swf'));\r
+ if (flashPlayer) {\r
+ baseUri = editor.documentBaseURI;\r
+ data.params.src = flashPlayer;\r
+\r
+ // Convert the movie url to absolute urls\r
+ if (editor.getParam('flash_video_player_absvideourl', true)) {\r
+ video_src = baseUri.toAbsolute(video_src || '', true);\r
+ poster_src = baseUri.toAbsolute(poster_src || '', true);\r
+ }\r
+\r
+ // Generate flash vars\r
+ flashVarsOutput = '';\r
+ flashVars = editor.getParam('flash_video_player_flashvars', {url : '$url', poster : '$poster'});\r
+ tinymce.each(flashVars, function(value, name) {\r
+ // Replace $url and $poster variables in flashvars value\r
+ value = value.replace(/\$url/, video_src || '');\r
+ value = value.replace(/\$poster/, poster_src || '');\r
+\r
+ if (value.length > 0)\r
+ flashVarsOutput += (flashVarsOutput ? '&' : '') + name + '=' + escape(value);\r
+ });\r
+\r
+ if (flashVarsOutput.length)\r
+ data.params.flashvars = flashVarsOutput;\r
+\r
+ params = editor.getParam('flash_video_player_params', {\r
+ allowfullscreen: true,\r
+ allowscriptaccess: true\r
+ });\r
+\r
+ tinymce.each(params, function(value, name) {\r
+ data.params[name] = "" + value;\r
+ });\r
+ }\r
+ };\r
+\r
+ data = node.attr('data-mce-json');\r
+ if (!data)\r
+ return;\r
+\r
+ data = JSON.parse(data);\r
+ typeItem = this.getType(node.attr('class'));\r
+\r
+ style = node.attr('data-mce-style')\r
+ if (!style) {\r
+ style = node.attr('style');\r
+\r
+ if (style)\r
+ style = editor.dom.serializeStyle(editor.dom.parseStyle(style, 'img'));\r
+ }\r
+\r
+ // Handle iframe\r
+ if (typeItem.name === 'Iframe') {\r
+ replacement = new Node('iframe', 1);\r
+\r
+ tinymce.each(rootAttributes, function(name) {\r
+ var value = node.attr(name);\r
+\r
+ if (name == 'class' && value)\r
+ value = value.replace(/mceItem.+ ?/g, '');\r
+\r
+ if (value && value.length > 0)\r
+ replacement.attr(name, value);\r
});\r
- } else {\r
- ob = dom.create('span', {\r
- id : p.id,\r
- _mce_name : 'object',\r
- classid : "clsid:" + o.classid,\r
- style : dom.getAttrib(n, 'style'),\r
- codebase : o.codebase,\r
- width : o.width,\r
- height : o.height\r
+\r
+ for (name in data.params)\r
+ replacement.attr(name, data.params[name]);\r
+\r
+ replacement.attr({\r
+ style: style,\r
+ src: data.params.src\r
});\r
+\r
+ node.replace(replacement);\r
+\r
+ return;\r
}\r
\r
- each (p, function(v, k) {\r
- if (!/^(width|height|codebase|classid|id|_cx|_cy)$/.test(k)) {\r
- // Use url instead of src in IE for Windows media\r
- if (o.type == 'application/x-mplayer2' && k == 'src' && !p.url)\r
- k = 'url';\r
+ // Handle scripts\r
+ if (this.editor.settings.media_use_script) {\r
+ replacement = new Node('script', 1).attr('type', 'text/javascript');\r
\r
- if (v)\r
- dom.add(ob, 'span', {_mce_name : 'param', name : k, '_mce_value' : v});\r
+ value = new Node('#text', 3);\r
+ value.value = 'write' + typeItem.name + '(' + JSON.serialize(tinymce.extend(data.params, {\r
+ width: node.attr('width'),\r
+ height: node.attr('height')\r
+ })) + ');';\r
+\r
+ replacement.append(value);\r
+ node.replace(replacement);\r
+\r
+ return;\r
+ }\r
+\r
+ // Add HTML5 video element\r
+ if (typeItem.name === 'Video' && data.video.sources[0]) {\r
+ // Create new object element\r
+ video = new Node('video', 1).attr(tinymce.extend({\r
+ id : node.attr('id'),\r
+ width: node.attr('width'),\r
+ height: node.attr('height'),\r
+ style : style\r
+ }, data.video.attrs));\r
+\r
+ // Get poster source and use that for flash fallback\r
+ if (data.video.attrs)\r
+ posterSrc = data.video.attrs.poster;\r
+\r
+ sources = data.video.sources = toArray(data.video.sources);\r
+ for (i = 0; i < sources.length; i++) {\r
+ if (/\.mp4$/.test(sources[i].src))\r
+ mp4Source = sources[i].src;\r
}\r
- });\r
\r
- if (!stc)\r
- dom.add(ob, 'span', tinymce.extend({_mce_name : 'embed', type : o.type, style : dom.getAttrib(n, 'style')}, p));\r
+ if (!sources[0].type) {\r
+ video.attr('src', sources[0].src);\r
+ sources.splice(0, 1);\r
+ }\r
\r
- return ob;\r
- },\r
+ for (i = 0; i < sources.length; i++) {\r
+ source = new Node('source', 1).attr(sources[i]);\r
+ source.shortEnded = true;\r
+ video.append(source);\r
+ }\r
\r
- _spansToImgs : function(p) {\r
- var t = this, dom = t.editor.dom, im, ci;\r
+ // Create flash fallback for video if we have a mp4 source\r
+ if (mp4Source) {\r
+ addPlayer(mp4Source, posterSrc);\r
+ typeItem = self.getType('flash');\r
+ } else\r
+ data.params.src = '';\r
+ }\r
\r
- each(dom.select('span', p), function(n) {\r
- // Convert object into image\r
- if (dom.getAttrib(n, 'class') == 'mceItemObject') {\r
- ci = dom.getAttrib(n, "classid").toLowerCase().replace(/\s+/g, '');\r
+ // Add HTML5 audio element\r
+ if (typeItem.name === 'Audio' && data.video.sources[0]) {\r
+ // Create new object element\r
+ audio = new Node('audio', 1).attr(tinymce.extend({\r
+ id : node.attr('id'),\r
+ width: node.attr('width'),\r
+ height: node.attr('height'),\r
+ style : style\r
+ }, data.video.attrs));\r
+\r
+ // Get poster source and use that for flash fallback\r
+ if (data.video.attrs)\r
+ posterSrc = data.video.attrs.poster;\r
+\r
+ sources = data.video.sources = toArray(data.video.sources);\r
+ if (!sources[0].type) {\r
+ audio.attr('src', sources[0].src);\r
+ sources.splice(0, 1);\r
+ }\r
\r
- switch (ci) {\r
- case 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000':\r
- dom.replace(t._createImg('mceItemFlash', n), n);\r
- break;\r
+ for (i = 0; i < sources.length; i++) {\r
+ source = new Node('source', 1).attr(sources[i]);\r
+ source.shortEnded = true;\r
+ audio.append(source);\r
+ }\r
\r
- case 'clsid:166b1bca-3f9c-11cf-8075-444553540000':\r
- dom.replace(t._createImg('mceItemShockWave', n), n);\r
- break;\r
+ data.params.src = '';\r
+ }\r
\r
- case 'clsid:6bf52a52-394a-11d3-b153-00c04f79faa6':\r
- case 'clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95':\r
- case 'clsid:05589fa1-c356-11ce-bf01-00aa0055595a':\r
- dom.replace(t._createImg('mceItemWindowsMedia', n), n);\r
- break;\r
+ // Do we have a params src then we can generate object\r
+ if (data.params.src) {\r
+ // Is flv movie add player for it\r
+ if (/\.flv$/i.test(data.params.src))\r
+ addPlayer(data.params.src, '');\r
+\r
+ if (args && args.force_absolute)\r
+ data.params.src = editor.documentBaseURI.toAbsolute(data.params.src);\r
+\r
+ // Create new object element\r
+ object = new Node('object', 1).attr({\r
+ id : node.attr('id'),\r
+ width: node.attr('width'),\r
+ height: node.attr('height'),\r
+ style : style\r
+ });\r
\r
- case 'clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b':\r
- dom.replace(t._createImg('mceItemQuickTime', n), n);\r
- break;\r
+ tinymce.each(rootAttributes, function(name) {\r
+ if (data[name] && name != 'type')\r
+ object.attr(name, data[name]);\r
+ });\r
\r
- case 'clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa':\r
- dom.replace(t._createImg('mceItemRealMedia', n), n);\r
- break;\r
+ // Add params\r
+ for (name in data.params) {\r
+ param = new Node('param', 1);\r
+ param.shortEnded = true;\r
+ value = data.params[name];\r
\r
- default:\r
- dom.replace(t._createImg('mceItemFlash', n), n);\r
- }\r
- \r
- return;\r
+ // Windows media needs to use url instead of src for the media URL\r
+ if (name === 'src' && typeItem.name === 'WindowsMedia')\r
+ name = 'url';\r
+\r
+ param.attr({name: name, value: value});\r
+ object.append(param);\r
}\r
\r
- // Convert embed into image\r
- if (dom.getAttrib(n, 'class') == 'mceItemEmbed') {\r
- switch (dom.getAttrib(n, 'type')) {\r
- case 'application/x-shockwave-flash':\r
- dom.replace(t._createImg('mceItemFlash', n), n);\r
- break;\r
+ // Setup add type and classid if strict is disabled\r
+ if (this.editor.getParam('media_strict', true)) {\r
+ object.attr({\r
+ data: data.params.src,\r
+ type: typeItem.mimes[0]\r
+ });\r
+ } else {\r
+ object.attr({\r
+ classid: "clsid:" + typeItem.clsids[0],\r
+ codebase: typeItem.codebase\r
+ });\r
\r
- case 'application/x-director':\r
- dom.replace(t._createImg('mceItemShockWave', n), n);\r
- break;\r
+ embed = new Node('embed', 1);\r
+ embed.shortEnded = true;\r
+ embed.attr({\r
+ id: node.attr('id'),\r
+ width: node.attr('width'),\r
+ height: node.attr('height'),\r
+ style : style,\r
+ type: typeItem.mimes[0]\r
+ });\r
\r
- case 'application/x-mplayer2':\r
- dom.replace(t._createImg('mceItemWindowsMedia', n), n);\r
- break;\r
+ for (name in data.params)\r
+ embed.attr(name, data.params[name]);\r
\r
- case 'video/quicktime':\r
- dom.replace(t._createImg('mceItemQuickTime', n), n);\r
- break;\r
+ tinymce.each(rootAttributes, function(name) {\r
+ if (data[name] && name != 'type')\r
+ embed.attr(name, data[name]);\r
+ });\r
\r
- case 'audio/x-pn-realaudio-plugin':\r
- dom.replace(t._createImg('mceItemRealMedia', n), n);\r
- break;\r
+ object.append(embed);\r
+ }\r
\r
- default:\r
- dom.replace(t._createImg('mceItemFlash', n), n);\r
- }\r
- } \r
- });\r
+ // Insert raw HTML\r
+ if (data.object_html) {\r
+ value = new Node('#text', 3);\r
+ value.raw = true;\r
+ value.value = data.object_html;\r
+ object.append(value);\r
+ }\r
+\r
+ // Append object to video element if it exists\r
+ if (video)\r
+ video.append(object);\r
+ }\r
+\r
+ if (video) {\r
+ // Insert raw HTML\r
+ if (data.video_html) {\r
+ value = new Node('#text', 3);\r
+ value.raw = true;\r
+ value.value = data.video_html;\r
+ video.append(value);\r
+ }\r
+ }\r
+\r
+ if (audio) {\r
+ // Insert raw HTML\r
+ if (data.video_html) {\r
+ value = new Node('#text', 3);\r
+ value.raw = true;\r
+ value.value = data.video_html;\r
+ audio.append(value);\r
+ }\r
+ }\r
+\r
+ if (video || audio || object)\r
+ node.replace(video || audio || object);\r
+ else\r
+ node.remove();\r
},\r
\r
- _createImg : function(cl, n) {\r
- var im, dom = this.editor.dom, pa = {}, ti = '', args;\r
+ /**\r
+ * Converts a tinymce.html.Node video/object/embed to an img element.\r
+ *\r
+ * The video/object/embed will be converted into an image placeholder with a JSON data attribute like this:\r
+ * <img class="mceItemMedia mceItemFlash" width="100" height="100" data-mce-json="{..}" />\r
+ *\r
+ * The JSON structure will be like this:\r
+ * {'params':{'flashvars':'something','quality':'high','src':'someurl'}, 'video':{'sources':[{src: 'someurl', type: 'video/mp4'}]}}\r
+ */\r
+ objectToImg : function(node) {\r
+ var object, embed, video, iframe, img, name, id, width, height, style, i, html,\r
+ param, params, source, sources, data, type, lookup = this.lookup,\r
+ matches, attrs, urlConverter = this.editor.settings.url_converter,\r
+ urlConverterScope = this.editor.settings.url_converter_scope;\r
+\r
+ function getInnerHTML(node) {\r
+ return new tinymce.html.Serializer({\r
+ inner: true,\r
+ validate: false\r
+ }).serialize(node);\r
+ };\r
\r
- args = ['id', 'name', 'width', 'height', 'bgcolor', 'align', 'flashvars', 'src', 'wmode', 'allowfullscreen', 'quality', 'data']; \r
+ // If node isn't in document\r
+ if (!node.parent)\r
+ return;\r
\r
- // Create image\r
- im = dom.create('img', {\r
- src : this.url + '/img/trans.gif',\r
- width : dom.getAttrib(n, 'width') || 100,\r
- height : dom.getAttrib(n, 'height') || 100,\r
- style : dom.getAttrib(n, 'style'),\r
- 'class' : cl\r
- });\r
+ // Handle media scripts\r
+ if (node.name === 'script') {\r
+ if (node.firstChild)\r
+ matches = scriptRegExp.exec(node.firstChild.value);\r
\r
- // Setup base parameters\r
- each(args, function(na) {\r
- var v = dom.getAttrib(n, na);\r
+ if (!matches)\r
+ return;\r
\r
- if (v)\r
- pa[na] = v;\r
- });\r
+ type = matches[1];\r
+ data = {video : {}, params : JSON.parse(matches[2])};\r
+ width = data.params.width;\r
+ height = data.params.height;\r
+ }\r
+\r
+ // Setup data objects\r
+ data = data || {\r
+ video : {},\r
+ params : {}\r
+ };\r
\r
- // Add optional parameters\r
- each(dom.select('span', n), function(n) {\r
- if (dom.hasClass(n, 'mceItemParam'))\r
- pa[dom.getAttrib(n, 'name')] = dom.getAttrib(n, '_mce_value');\r
+ // Setup new image object\r
+ img = new Node('img', 1);\r
+ img.attr({\r
+ src : this.editor.theme.url + '/img/trans.gif'\r
});\r
\r
- // Use src not movie\r
- if (pa.movie) {\r
- pa.src = pa.movie;\r
- delete pa.movie;\r
+ // Video element\r
+ name = node.name;\r
+ if (name === 'video' || name == 'audio') {\r
+ video = node;\r
+ object = node.getAll('object')[0];\r
+ embed = node.getAll('embed')[0];\r
+ width = video.attr('width');\r
+ height = video.attr('height');\r
+ id = video.attr('id');\r
+ data.video = {attrs : {}, sources : []};\r
+\r
+ // Get all video attributes\r
+ attrs = data.video.attrs;\r
+ for (name in video.attributes.map)\r
+ attrs[name] = video.attributes.map[name];\r
+\r
+ source = node.attr('src');\r
+ if (source)\r
+ data.video.sources.push({src : urlConverter.call(urlConverterScope, source, 'src', node.name)});\r
+\r
+ // Get all sources\r
+ sources = video.getAll("source");\r
+ for (i = 0; i < sources.length; i++) {\r
+ source = sources[i].remove();\r
+\r
+ data.video.sources.push({\r
+ src: urlConverter.call(urlConverterScope, source.attr('src'), 'src', 'source'),\r
+ type: source.attr('type'),\r
+ media: source.attr('media')\r
+ });\r
+ }\r
+\r
+ // Convert the poster URL\r
+ if (attrs.poster)\r
+ attrs.poster = urlConverter.call(urlConverterScope, attrs.poster, 'poster', node.name);\r
}\r
\r
- // No src try data\r
- if (!pa.src) {\r
- pa.src = pa.data;\r
- delete pa.data;\r
+ // Object element\r
+ if (node.name === 'object') {\r
+ object = node;\r
+ embed = node.getAll('embed')[0];\r
}\r
\r
- // Merge with embed args\r
- n = dom.select('.mceItemEmbed', n)[0];\r
- if (n) {\r
- each(args, function(na) {\r
- var v = dom.getAttrib(n, na);\r
+ // Embed element\r
+ if (node.name === 'embed')\r
+ embed = node;\r
+\r
+ // Iframe element\r
+ if (node.name === 'iframe') {\r
+ iframe = node;\r
+ type = 'Iframe';\r
+ }\r
+\r
+ if (object) {\r
+ // Get width/height\r
+ width = width || object.attr('width');\r
+ height = height || object.attr('height');\r
+ style = style || object.attr('style');\r
+ id = id || object.attr('id');\r
+\r
+ // Get all object params\r
+ params = object.getAll("param");\r
+ for (i = 0; i < params.length; i++) {\r
+ param = params[i];\r
+ name = param.remove().attr('name');\r
+\r
+ if (!excludedAttrs[name])\r
+ data.params[name] = param.attr('value');\r
+ }\r
+\r
+ data.params.src = data.params.src || object.attr('data');\r
+ }\r
\r
- if (v && !pa[na])\r
- pa[na] = v;\r
+ if (embed) {\r
+ // Get width/height\r
+ width = width || embed.attr('width');\r
+ height = height || embed.attr('height');\r
+ style = style || embed.attr('style');\r
+ id = id || embed.attr('id');\r
+\r
+ // Get all embed attributes\r
+ for (name in embed.attributes.map) {\r
+ if (!excludedAttrs[name] && !data.params[name])\r
+ data.params[name] = embed.attributes.map[name];\r
+ }\r
+ }\r
+\r
+ if (iframe) {\r
+ // Get width/height\r
+ width = iframe.attr('width');\r
+ height = iframe.attr('height');\r
+ style = style || iframe.attr('style');\r
+ id = iframe.attr('id');\r
+\r
+ tinymce.each(rootAttributes, function(name) {\r
+ img.attr(name, iframe.attr(name));\r
});\r
+\r
+ // Get all iframe attributes\r
+ for (name in iframe.attributes.map) {\r
+ if (!excludedAttrs[name] && !data.params[name])\r
+ data.params[name] = iframe.attributes.map[name];\r
+ }\r
}\r
\r
- delete pa.width;\r
- delete pa.height;\r
+ // Use src not movie\r
+ if (data.params.movie) {\r
+ data.params.src = data.params.src || data.params.movie;\r
+ delete data.params.movie;\r
+ }\r
\r
- im.title = this._serialize(pa);\r
+ // Convert the URL to relative/absolute depending on configuration\r
+ if (data.params.src)\r
+ data.params.src = urlConverter.call(urlConverterScope, data.params.src, 'src', 'object');\r
\r
- return im;\r
- },\r
+ if (video) {\r
+ if (node.name === 'video')\r
+ type = lookup.video.name;\r
+ else if (node.name === 'audio')\r
+ type = lookup.audio.name;\r
+ }\r
\r
- _parse : function(s) {\r
- return tinymce.util.JSON.parse('{' + s + '}');\r
- },\r
+ if (object && !type)\r
+ type = (lookup[(object.attr('clsid') || '').toLowerCase()] || lookup[(object.attr('type') || '').toLowerCase()] || {}).name;\r
\r
- _serialize : function(o) {\r
- return tinymce.util.JSON.serialize(o).replace(/[{}]/g, '');\r
+ if (embed && !type)\r
+ type = (lookup[(embed.attr('type') || '').toLowerCase()] || {}).name;\r
+\r
+ // Replace the video/object/embed element with a placeholder image containing the data\r
+ node.replace(img);\r
+\r
+ // Remove embed\r
+ if (embed)\r
+ embed.remove();\r
+\r
+ // Serialize the inner HTML of the object element\r
+ if (object) {\r
+ html = getInnerHTML(object.remove());\r
+\r
+ if (html)\r
+ data.object_html = html;\r
+ }\r
+\r
+ // Serialize the inner HTML of the video element\r
+ if (video) {\r
+ html = getInnerHTML(video.remove());\r
+\r
+ if (html)\r
+ data.video_html = html;\r
+ }\r
+\r
+ // Set width/height of placeholder\r
+ img.attr({\r
+ id : id,\r
+ 'class' : 'mceItemMedia mceItem' + (type || 'Flash'),\r
+ style : style,\r
+ width : width || (node.name == 'audio' ? "300" : "320"),\r
+ height : height || (node.name == 'audio' ? "32" : "240"),\r
+ "data-mce-json" : JSON.serialize(data, "'")\r
+ });\r
}\r
});\r
\r
projects / citadel.git / blobdiff