/**\r
- * $Id: editor_plugin_src.js 275 2007-05-01 15:35:08Z spocke $\r
+ * editor_plugin_src.js\r
*\r
- * @author Moxiecode\r
- * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.\r
+ * Copyright 2009, Moxiecode Systems AB\r
+ * Released under LGPL License.\r
+ *\r
+ * License: http://tinymce.moxiecode.com/license\r
+ * Contributing: http://tinymce.moxiecode.com/contributing\r
*/\r
\r
-/* Import plugin specific language pack */\r
-tinyMCE.importPluginLanguagePack('media');\r
-\r
-var TinyMCE_MediaPlugin = {\r
- getInfo : function() {\r
- return {\r
- longname : 'Media',\r
- author : 'Moxiecode Systems AB',\r
- authorurl : 'http://tinymce.moxiecode.com',\r
- infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/media',\r
- version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion\r
- };\r
- },\r
-\r
- initInstance : function(inst) {\r
- // Warn if user has flash plugin and media plugin at the same time\r
- if (inst.hasPlugin('flash') && !tinyMCE.flashWarn) {\r
- alert('Flash plugin is deprecated and should not be used together with the media plugin.');\r
- tinyMCE.flashWarn = true;\r
+(function() {\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
- if (!tinyMCE.settings['media_skip_plugin_css'])\r
- tinyMCE.importCSS(inst.getDoc(), tinyMCE.baseURL + "/plugins/media/css/content.css");\r
- },\r
+ return obj;\r
+ };\r
\r
- getControlHTML : function(cn) {\r
- switch (cn) {\r
- case "media":\r
- return tinyMCE.getButtonHTML(cn, 'lang_media_desc', '{$pluginurl}/images/media.gif', 'mceMedia');\r
- }\r
+ tinymce.create('tinymce.plugins.MediaPlugin', {\r
+ init : function(ed, url) {\r
+ var self = this, lookup = {}, i, y, item, name;\r
+\r
+ function isMediaImg(node) {\r
+ return node && node.nodeName === 'IMG' && ed.dom.hasClass(node, 'mceItemMedia');\r
+ };\r
+\r
+ self.editor = ed;\r
+ self.url = url;\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
+ 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
+ lookup['mceItem' + name] = item;\r
+ lookup[name.toLowerCase()] = item;\r
\r
- return "";\r
- },\r
-\r
- execCommand : function(editor_id, element, command, user_interface, value) {\r
- // Handle commands\r
- switch (command) {\r
- case "mceMedia":\r
- tinyMCE.openWindow({\r
- file : '../../plugins/media/media.htm',\r
- width : 430 + tinyMCE.getLang('lang_media_delta_width', 0),\r
- height : 470 + tinyMCE.getLang('lang_media_delta_height', 0)\r
- }, {\r
- editor_id : editor_id,\r
- inline : "yes"\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
+ 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
+ // 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
- return true;\r
- }\r
-\r
- // Pass to next handler in chain\r
- return false;\r
- },\r
-\r
- cleanup : function(type, content, inst) {\r
- var nl, img, i, ne, d, s, ci;\r
-\r
- switch (type) {\r
- case "insert_to_editor":\r
- img = tinyMCE.getParam("theme_href") + '/images/spacer.gif';\r
- content = content.replace(/<script[^>]*>\s*write(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)\(\{([^\)]*)\}\);\s*<\/script>/gi, '<img class="mceItem$1" title="$2" src="' + img + '" />');\r
- content = content.replace(/<object([^>]*)>/gi, '<div class="mceItemObject" $1>');\r
- content = content.replace(/<embed([^>]*)>/gi, '<div class="mceItemObjectEmbed" $1>');\r
- content = content.replace(/<\/(object|embed)([^>]*)>/gi, '</div>');\r
- content = content.replace(/<param([^>]*)>/gi, '<div $1 class="mceItemParam"></div>');\r
- content = content.replace(new RegExp('\\/ class="mceItemParam"><\\/div>', 'gi'), 'class="mceItemParam"></div>');\r
- break;\r
-\r
- case "insert_to_editor_dom":\r
- d = inst.getDoc();\r
- nl = content.getElementsByTagName("img");\r
- for (i=0; i<nl.length; i++) {\r
- if (/mceItem(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)/.test(nl[i].className)) {\r
- nl[i].width = nl[i].title.replace(/.*width:[^0-9]?([0-9]+)%?.*/g, '$1');\r
- nl[i].height = nl[i].title.replace(/.*height:[^0-9]?([0-9]+)%?.*/g, '$1');\r
- //nl[i].align = nl[i].title.replace(/.*align:([a-z]+).*/gi, '$1');\r
+ // Convert image placeholders to video elements\r
+ ed.serializer.addNodeFilter('img', function(nodes, name, args) {\r
+ var i = nodes.length, node;\r
+\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(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
- nl = tinyMCE.selectElements(content, 'DIV', function (n) {return tinyMCE.hasCSSClass(n, 'mceItemObject');});\r
- for (i=0; i<nl.length; i++) {\r
- ci = tinyMCE.getAttrib(nl[i], "classid").toLowerCase().replace(/\s+/g, '');\r
+ // Add contect menu if it's loaded\r
+ if (ed && ed.plugins.contextmenu) {\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
- switch (ci) {\r
- case 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000':\r
- nl[i].parentNode.replaceChild(TinyMCE_MediaPlugin._createImg('mceItemFlash', d, nl[i]), nl[i]);\r
- break;\r
+ // Register commands\r
+ ed.addCommand('mceMedia', function() {\r
+ var data, img;\r
\r
- case 'clsid:166b1bca-3f9c-11cf-8075-444553540000':\r
- nl[i].parentNode.replaceChild(TinyMCE_MediaPlugin._createImg('mceItemShockWave', d, nl[i]), nl[i]);\r
- break;\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
- case 'clsid:6bf52a52-394a-11d3-b153-00c04f79faa6':\r
- case 'clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95':\r
- case 'clsid:05589fa1-c356-11ce-bf01-00aa0055595a':\r
- nl[i].parentNode.replaceChild(TinyMCE_MediaPlugin._createImg('mceItemWindowsMedia', d, nl[i]), nl[i]);\r
- break;\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
- case 'clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b':\r
- nl[i].parentNode.replaceChild(TinyMCE_MediaPlugin._createImg('mceItemQuickTime', d, nl[i]), nl[i]);\r
- break;\r
+ if (value)\r
+ data[name] = value;\r
+ });\r
\r
- case 'clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa':\r
- nl[i].parentNode.replaceChild(TinyMCE_MediaPlugin._createImg('mceItemRealMedia', d, nl[i]), nl[i]);\r
- break;\r
+ data.type = self.getType(img.className).name.toLowerCase();\r
}\r
}\r
\r
- // Handle embed (if any)\r
- nl = tinyMCE.selectNodes(content, function (n) {return n.className == 'mceItemObjectEmbed';});\r
- for (i=0; i<nl.length; i++) {\r
- switch (tinyMCE.getAttrib(nl[i], 'type')) {\r
- case 'application/x-shockwave-flash':\r
- TinyMCE_MediaPlugin._createImgFromEmbed(nl[i], d, 'mceItemFlash');\r
- break;\r
-\r
- case 'application/x-director':\r
- TinyMCE_MediaPlugin._createImgFromEmbed(nl[i], d, 'mceItemShockWave');\r
- break;\r
-\r
- case 'application/x-mplayer2':\r
- TinyMCE_MediaPlugin._createImgFromEmbed(nl[i], d, 'mceItemWindowsMedia');\r
- break;\r
-\r
- case 'video/quicktime':\r
- TinyMCE_MediaPlugin._createImgFromEmbed(nl[i], d, 'mceItemQuickTime');\r
- break;\r
-\r
- case 'audio/x-pn-realaudio-plugin':\r
- TinyMCE_MediaPlugin._createImgFromEmbed(nl[i], d, 'mceItemRealMedia');\r
- break;\r
+ if (!data) {\r
+ data = {\r
+ type : 'flash',\r
+ video: {sources:[]},\r
+ params: {}\r
+ };\r
+ }\r
+\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
+ // Register buttons\r
+ ed.addButton('media', {title : 'media.desc', cmd : 'mceMedia'});\r
+\r
+ // Update media selection status\r
+ ed.onNodeChange.add(function(ed, cm, node) {\r
+ cm.setActive('media', isMediaImg(node));\r
+ });\r
+ },\r
+\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 (!url)\r
+ return url;\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
+ return {\r
+ longname : 'Media',\r
+ author : 'Moxiecode Systems AB',\r
+ authorurl : 'http://tinymce.moxiecode.com',\r
+ infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/media',\r
+ version : tinymce.majorVersion + "." + tinymce.minorVersion\r
+ };\r
+ },\r
+\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
+ 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
+ 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
+ img.width = data.width || (data.type == 'audio' ? "300" : "320");\r
+ img.height = data.height || (data.type == 'audio' ? "32" : "240");\r
+\r
+ return img;\r
+ },\r
+\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
- break;\r
+ };\r
\r
- case "get_from_editor":\r
- var startPos = -1, endPos, attribs, chunkBefore, chunkAfter, embedHTML, at, pl, cb, mt, ex;\r
+ data = node.attr('data-mce-json');\r
+ if (!data)\r
+ return;\r
\r
- while ((startPos = content.indexOf('<img', startPos+1)) != -1) {\r
- endPos = content.indexOf('/>', startPos);\r
- attribs = TinyMCE_MediaPlugin._parseAttributes(content.substring(startPos + 4, endPos));\r
+ data = JSON.parse(data);\r
+ typeItem = this.getType(node.attr('class'));\r
\r
- // Is not flash, skip it\r
- if (!/mceItem(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)/.test(attribs['class']))\r
- continue;\r
+ style = node.attr('data-mce-style')\r
+ if (!style) {\r
+ style = node.attr('style');\r
\r
- endPos += 2;\r
+ if (style)\r
+ style = editor.dom.serializeStyle(editor.dom.parseStyle(style, 'img'));\r
+ }\r
\r
- // Parse attributes\r
- at = attribs['title'];\r
- if (at) {\r
- at = at.replace(/&(#39|apos);/g, "'");\r
- at = at.replace(/&#quot;/g, '"');\r
+ // Handle iframe\r
+ if (typeItem.name === 'Iframe') {\r
+ replacement = new Node('iframe', 1);\r
\r
- try {\r
- pl = eval('x={' + at + '};');\r
- } catch (ex) {\r
- pl = {};\r
- }\r
- }\r
+ tinymce.each(rootAttributes, function(name) {\r
+ var value = node.attr(name);\r
\r
- // Use object/embed\r
- if (!tinyMCE.getParam('media_use_script', false)) {\r
- switch (attribs['class']) {\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 = tinyMCE.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
- // Force absolute URL\r
- if (!tinyMCE.getParam("relative_urls"))\r
- pl.src = tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], pl.src);\r
-\r
- embedHTML = TinyMCE_MediaPlugin._getEmbed(ci, cb, mt, pl, attribs);\r
- } else {\r
- // Use script version\r
- switch (attribs['class']) {\r
- case 'mceItemFlash':\r
- s = 'writeFlash';\r
- break;\r
-\r
- case 'mceItemShockWave':\r
- s = 'writeShockWave';\r
- break;\r
-\r
- case 'mceItemWindowsMedia':\r
- s = 'writeWindowsMedia';\r
- break;\r
-\r
- case 'mceItemQuickTime':\r
- s = 'writeQuickTime';\r
- break;\r
-\r
- case 'mceItemRealMedia':\r
- s = 'writeRealMedia';\r
- break;\r
- }\r
-\r
- if (attribs.width)\r
- at = at.replace(/width:[^0-9]?[0-9]+%?[^0-9]?/g, "width:'" + attribs.width + "'");\r
-\r
- if (attribs.height)\r
- at = at.replace(/height:[^0-9]?[0-9]+%?[^0-9]?/g, "height:'" + attribs.height + "'");\r
-\r
- // Force absolute URL\r
- if (!tinyMCE.getParam("relative_urls")) {\r
- pl.src = tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], pl.src);\r
- at = at.replace(new RegExp("src:'[^']*'", "g"), "src:'" + pl.src + "'");\r
- }\r
-\r
- embedHTML = '<script type="text/javascript">' + s + '({' + at + '});</script>';\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
+\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
+ // Handle scripts\r
+ if (this.editor.settings.media_use_script) {\r
+ replacement = new Node('script', 1).attr('type', 'text/javascript');\r
+\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
- // Insert embed/object chunk\r
- chunkBefore = content.substring(0, startPos);\r
- chunkAfter = content.substring(endPos);\r
- content = chunkBefore + embedHTML + chunkAfter;\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
+ if (!sources[0].type) {\r
+ video.attr('src', sources[0].src);\r
+ sources.splice(0, 1);\r
}\r
- break;\r
- }\r
\r
- return content;\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
+ // 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
+ // 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
- handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {\r
- if (node == null)\r
- return;\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
- do {\r
- if (node.nodeName == "IMG" && /mceItem(Flash|ShockWave|WindowsMedia|QuickTime|RealMedia)/.test(tinyMCE.getAttrib(node, 'class'))) {\r
- tinyMCE.switchClass(editor_id + '_media', 'mceButtonSelected');\r
- return true;\r
+ data.params.src = '';\r
}\r
- } while ((node = node.parentNode));\r
\r
- tinyMCE.switchClass(editor_id + '_media', 'mceButtonNormal');\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
- return true;\r
- },\r
+ tinymce.each(rootAttributes, function(name) {\r
+ if (data[name] && name != 'type')\r
+ object.attr(name, data[name]);\r
+ });\r
\r
- _createImgFromEmbed : function(n, d, cl) {\r
- var ne, at, i, ti = '', an;\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
- ne = d.createElement('img');\r
- ne.src = tinyMCE.getParam("theme_href") + '/images/spacer.gif';\r
- ne.width = tinyMCE.getAttrib(n, 'width');\r
- ne.height = tinyMCE.getAttrib(n, 'height');\r
- ne.className = cl;\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
- at = n.attributes;\r
- for (i=0; i<at.length; i++) {\r
- if (at[i].specified && at[i].nodeValue) {\r
- an = at[i].nodeName.toLowerCase();\r
+ param.attr({name: name, value: value});\r
+ object.append(param);\r
+ }\r
\r
- if (an == 'src')\r
- continue;\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
+ 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
+ for (name in data.params)\r
+ embed.attr(name, data.params[name]);\r
+\r
+ tinymce.each(rootAttributes, function(name) {\r
+ if (data[name] && name != 'type')\r
+ embed.attr(name, data[name]);\r
+ });\r
+\r
+ object.append(embed);\r
+ }\r
\r
- if (an == 'mce_src')\r
- an = 'src';\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
- if (an.indexOf('mce_') == -1 && !new RegExp('^(class|type)$').test(an))\r
- ti += an.toLowerCase() + ':\'' + at[i].nodeValue + "',";\r
+ // Append object to video element if it exists\r
+ if (video)\r
+ video.append(object);\r
}\r
- }\r
\r
- ti = ti.length > 0 ? ti.substring(0, ti.length - 1) : ti;\r
- ne.title = ti;\r
-\r
- n.parentNode.replaceChild(ne, n);\r
- },\r
-\r
- _createImg : function(cl, d, n) {\r
- var i, nl, ti = "", an, av, al = new Array();\r
-\r
- ne = d.createElement('img');\r
- ne.src = tinyMCE.getParam("theme_href") + '/images/spacer.gif';\r
- ne.width = tinyMCE.getAttrib(n, 'width');\r
- ne.height = tinyMCE.getAttrib(n, 'height');\r
- ne.className = cl;\r
-\r
- al.id = tinyMCE.getAttrib(n, 'id');\r
- al.name = tinyMCE.getAttrib(n, 'name');\r
- al.width = tinyMCE.getAttrib(n, 'width');\r
- al.height = tinyMCE.getAttrib(n, 'height');\r
- al.bgcolor = tinyMCE.getAttrib(n, 'bgcolor');\r
- al.align = tinyMCE.getAttrib(n, 'align');\r
- al.class_name = tinyMCE.getAttrib(n, 'mce_class');\r
-\r
- nl = n.getElementsByTagName('div');\r
- for (i=0; i<nl.length; i++) {\r
- av = tinyMCE.getAttrib(nl[i], 'value');\r
- av = av.replace(new RegExp('\\\\', 'g'), '\\\\');\r
- av = av.replace(new RegExp('"', 'g'), '\\"');\r
- av = av.replace(new RegExp("'", 'g'), "\\'");\r
- an = tinyMCE.getAttrib(nl[i], 'name');\r
- al[an] = av;\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 (al.movie) {\r
- al.src = al.movie;\r
- al.movie = null;\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
- for (an in al) {\r
- if (al[an] != null && typeof(al[an]) != "function" && al[an] != '')\r
- ti += an.toLowerCase() + ':\'' + al[an] + "',";\r
- }\r
+ if (video || audio || object)\r
+ node.replace(video || audio || object);\r
+ else\r
+ node.remove();\r
+ },\r
+\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
+ // If node isn't in document\r
+ if (!node.parent)\r
+ return;\r
+\r
+ // Handle media scripts\r
+ if (node.name === 'script') {\r
+ if (node.firstChild)\r
+ matches = scriptRegExp.exec(node.firstChild.value);\r
+\r
+ if (!matches)\r
+ return;\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
- ti = ti.length > 0 ? ti.substring(0, ti.length - 1) : ti;\r
- ne.title = ti;\r
+ // Setup data objects\r
+ data = data || {\r
+ video : {},\r
+ params : {}\r
+ };\r
+\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
+ // 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
- return ne;\r
- },\r
+ // Convert the poster URL\r
+ if (attrs.poster)\r
+ attrs.poster = urlConverter.call(urlConverterScope, attrs.poster, 'poster', node.name);\r
+ }\r
\r
- _getEmbed : function(cls, cb, mt, p, at) {\r
- var h = '', n;\r
+ // Object element\r
+ if (node.name === 'object') {\r
+ object = node;\r
+ embed = node.getAll('embed')[0];\r
+ }\r
\r
- p.width = at.width ? at.width : p.width;\r
- p.height = at.height ? at.height : p.height;\r
+ // Embed element\r
+ if (node.name === 'embed')\r
+ embed = node;\r
\r
- h += '<object classid="clsid:' + cls + '" codebase="' + cb + '"';\r
- h += typeof(p.id) != "undefined" ? ' id="' + p.id + '"' : '';\r
- h += typeof(p.name) != "undefined" ? ' name="' + p.name + '"' : '';\r
- h += typeof(p.width) != "undefined" ? ' width="' + p.width + '"' : '';\r
- h += typeof(p.height) != "undefined" ? ' height="' + p.height + '"' : '';\r
- h += typeof(p.align) != "undefined" ? ' align="' + p.align + '"' : '';\r
- h += '>';\r
+ // Iframe element\r
+ if (node.name === 'iframe') {\r
+ iframe = node;\r
+ type = 'Iframe';\r
+ }\r
\r
- for (n in p) {\r
- if (typeof(p[n]) != "undefined" && typeof(p[n]) != "function") {\r
- h += '<param name="' + n + '" value="' + p[n] + '" />';\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
- // Add extra url parameter if it's an absolute URL on WMP\r
- if (n == 'src' && p[n].indexOf('://') != -1 && mt == 'application/x-mplayer2')\r
- h += '<param name="url" value="' + p[n] + '" />';\r
+ data.params.src = data.params.src || object.attr('data');\r
}\r
- }\r
\r
- h += '<embed type="' + mt + '"';\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
- for (n in p) {\r
- if (typeof(p[n]) == "function")\r
- continue;\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
- // Skip url parameter for embed tag on WMP\r
- if (!(n == 'url' && mt == 'application/x-mplayer2'))\r
- h += ' ' + n + '="' + p[n] + '"';\r
- }\r
+ tinymce.each(rootAttributes, function(name) {\r
+ img.attr(name, iframe.attr(name));\r
+ });\r
\r
- h += '></embed></object>';\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
- return h;\r
- },\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
- _parseAttributes : function(attribute_string) {\r
- var attributeName = "", endChr = '"';\r
- var attributeValue = "";\r
- var withInName;\r
- var withInValue;\r
- var attributes = new Array();\r
- var whiteSpaceRegExp = new RegExp('^[ \n\r\t]+', 'g');\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
- if (attribute_string == null || attribute_string.length < 2)\r
- return null;\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
- withInName = withInValue = false;\r
+ if (object && !type)\r
+ type = (lookup[(object.attr('clsid') || '').toLowerCase()] || lookup[(object.attr('type') || '').toLowerCase()] || {}).name;\r
\r
- for (var i=0; i<attribute_string.length; i++) {\r
- var chr = attribute_string.charAt(i);\r
+ if (embed && !type)\r
+ type = (lookup[(embed.attr('type') || '').toLowerCase()] || {}).name;\r
\r
- if ((chr == '"' || chr == "'") && !withInValue) {\r
- withInValue = true;\r
- endChr = chr;\r
- } else if (chr == endChr && withInValue) {\r
- withInValue = false;\r
+ // Replace the video/object/embed element with a placeholder image containing the data\r
+ node.replace(img);\r
\r
- var pos = attributeName.lastIndexOf(' ');\r
- if (pos != -1)\r
- attributeName = attributeName.substring(pos+1);\r
+ // Remove embed\r
+ if (embed)\r
+ embed.remove();\r
\r
- attributes[attributeName.toLowerCase()] = attributeValue.substring(1);\r
+ // Serialize the inner HTML of the object element\r
+ if (object) {\r
+ html = getInnerHTML(object.remove());\r
\r
- attributeName = "";\r
- attributeValue = "";\r
- } else if (!whiteSpaceRegExp.test(chr) && !withInName && !withInValue)\r
- withInName = true;\r
+ if (html)\r
+ data.object_html = html;\r
+ }\r
\r
- if (chr == '=' && withInName)\r
- withInName = false;\r
+ // Serialize the inner HTML of the video element\r
+ if (video) {\r
+ html = getInnerHTML(video.remove());\r
\r
- if (withInName)\r
- attributeName += chr;\r
+ if (html)\r
+ data.video_html = html;\r
+ }\r
\r
- if (withInValue)\r
- attributeValue += chr;\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
- return attributes;\r
- }\r
-};\r
-\r
-tinyMCE.addPlugin("media", TinyMCE_MediaPlugin);\r
+ // Register plugin\r
+ tinymce.PluginManager.add('media', tinymce.plugins.MediaPlugin);\r
+})();
\ No newline at end of file
projects / citadel.git / blobdiff