[pLog-svn] r4081 - in
plog/branches/lifetype-1.1.1/js/tinymce/plugins: .
insertvideo insertvideo/css insertvideo/images
oscar at devel.lifetype.net
oscar at devel.lifetype.net
Tue Oct 3 23:09:09 GMT 2006
Author: oscar
Date: 2006-10-03 23:09:08 +0000 (Tue, 03 Oct 2006)
New Revision: 4081
Added:
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/content.css
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/flash.css
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/editor_plugin.js
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/functions.js
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/gvideo.png
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/youtube.png
plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/videoinput.html
Log:
a plugin for tinymce that allows to insert videos from youtube and google video without breaking the xhhtml compliancy. The code has been shamelessly ripped from the tinymce 'flash' plugin but it works. I ahven't enabled it yet in the toolbar because it needs some polish.
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/content.css
===================================================================
--- plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/content.css 2006-10-03 19:04:27 UTC (rev 4080)
+++ plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/content.css 2006-10-03 23:09:08 UTC (rev 4081)
@@ -0,0 +1,15 @@
+.ltVideoYouTube {
+ border: 1px dotted #cc0000;
+ background-image: url('../images/youtube.png');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-color: #ffffcc;
+}
+
+.ltVideoGoogleVideo {
+ border: 1px dotted #cc0000;
+ background-image: url('../images/gvideo.png');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-color: #ffffcc;
+}
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/flash.css
===================================================================
--- plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/flash.css 2006-10-03 19:04:27 UTC (rev 4080)
+++ plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/css/flash.css 2006-10-03 23:09:08 UTC (rev 4081)
@@ -0,0 +1,11 @@
+.panel_wrapper div.current {
+ height: 100px;
+}
+
+#width, #height {
+ width: 50px;
+}
+
+#file {
+ width: 250px;
+}
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/editor_plugin.js
===================================================================
--- plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/editor_plugin.js 2006-10-03 19:04:27 UTC (rev 4080)
+++ plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/editor_plugin.js 2006-10-03 23:09:08 UTC (rev 4081)
@@ -0,0 +1,278 @@
+/* Import plugin specific language pack */
+tinyMCE.importPluginLanguagePack('insertvideo', 'en,tr,he,nb,ru,ru_KOI8-R,ru_UTF-8,nn,fi,cy,es,is,pl'); // <- Add a comma separated list of all supported languages
+
+// Singleton class
+var TinyMCE_insertvideoPlugin = {
+ getInfo : function() {
+ return {
+ longname : 'insertvideo plugin',
+ author : 'The LifeType Project',
+ authorurl : 'http://www.lifetype.net',
+ infourl : 'http://www.lifetype.net',
+ version : "1.0"
+ };
+ },
+
+ initInstance : function(inst) {
+ tinyMCE.importCSS(inst.getDoc(), tinyMCE.baseURL + "/plugins/insertvideo/css/content.css");
+ },
+
+ getControlHTML : function(cn) {
+ switch (cn) {
+ case "insertvideo":
+ return tinyMCE.getButtonHTML(cn, 'lang_insertvideo_desc', '{$pluginurl}/images/youtube.png', 'mceinsertvideo', true);
+ }
+
+ return "";
+ },
+
+ /**
+ * Executes a specific command, this function handles plugin commands.
+ *
+ * @param {string} editor_id TinyMCE editor instance id that issued the command.
+ * @param {HTMLElement} element Body or root element for the editor instance.
+ * @param {string} command Command name to be executed.
+ * @param {string} user_interface True/false if a user interface should be presented.
+ * @param {mixed} value Custom value argument, can be anything.
+ * @return true/false if the command was executed by this plugin or not.
+ * @type
+ */
+ execCommand : function(editor_id, element, command, user_interface, value) {
+ // Handle commands
+ switch (command) {
+ // Remember to have the "mce" prefix for commands so they don't intersect with built in ones in the browser.
+ case "mceinsertvideo":
+ // Show UI/Popup
+ if (user_interface) {
+ // Open a popup window and send in some custom data in a window argument
+ var insertvideo = new Array();
+
+ insertvideo['file'] = '../../plugins/insertvideo/videoinput.html'; // Relative to theme
+ insertvideo['width'] = 500;
+ insertvideo['height'] = 200;
+
+ tinyMCE.openWindow(insertvideo, {editor_id : editor_id, resizable : "no", scrollbars : "no", inline : "yes"});
+ }
+ return true;
+ }
+
+ // Pass to next handler in chain
+ return false;
+ },
+
+ cleanup : function(type, content) {
+ switch (type) {
+ case "insert_to_editor_dom":
+ // Force relative/absolute
+ if (tinyMCE.getParam('convert_urls')) {
+ var imgs = content.getElementsByTagName("img");
+ for (var i=0; i<imgs.length; i++) {
+ if (tinyMCE.getAttrib(imgs[i], "class") == "ltVideoYouTube") {
+ var src = tinyMCE.getAttrib(imgs[i], "alt");
+
+ if (tinyMCE.getParam('convert_urls'))
+ src = eval(tinyMCE.settings['urlconverter_callback'] + "(src, null, true);");
+
+ imgs[i].setAttribute('alt', src);
+ imgs[i].setAttribute('title', src);
+ }
+ }
+ }
+ break;
+
+ case "get_from_editor_dom":
+ var imgs = content.getElementsByTagName("img");
+ for (var i=0; i<imgs.length; i++) {
+ if (tinyMCE.getAttrib(imgs[i], "class") == "ltVideoYouTube") {
+ var src = tinyMCE.getAttrib(imgs[i], "alt");
+
+ if (tinyMCE.getParam('convert_urls'))
+ src = eval(tinyMCE.settings['urlconverter_callback'] + "(src, null, true);");
+
+ imgs[i].setAttribute('alt', src);
+ imgs[i].setAttribute('title', src);
+ }
+ }
+ break;
+
+ case "insert_to_editor":
+ var startPos = 0;
+ var embedList = new Array();
+
+ // Fix the embed and object elements
+ content = content.replace(new RegExp('<[ ]*object','gi'),'<object');
+ content = content.replace(new RegExp('<[ ]*/object[ ]*>','gi'),'</object>');
+
+ // Parse all embed tags
+ while ((startPos = content.indexOf('<embed', startPos+1)) != -1) {
+ var endPos = content.indexOf('>', startPos);
+ var attribs = TinyMCE_FlashPlugin._parseAttributes(content.substring(startPos + 6, endPos));
+ embedList[embedList.length] = attribs;
+ }
+
+ // Parse all object tags and replace them with images from the embed data
+ var index = 0;
+ while ((startPos = content.indexOf('<object', startPos)) != -1) {
+ if (index >= embedList.length)
+ break;
+
+ var attribs = embedList[index];
+
+ // Find end of object
+ endPos = content.indexOf('</object>', startPos);
+ endPos += 9;
+
+ // Insert image
+ var contentAfter = content.substring(endPos);
+ content = content.substring(0, startPos);
+ content += '<img width="' + attribs["width"] + '" height="' + attribs["height"] + '"';
+ content += ' src="' + (tinyMCE.getParam("theme_href") + '/images/spacer.gif') + '" title="' + attribs["src"] + '"';
+ content += ' alt="' + attribs["src"] + '" class="ltVideoYouTube" />' + content.substring(endPos);
+ content += contentAfter;
+ index++;
+
+ startPos++;
+ }
+
+ // Parse all embed tags and replace them with images from the embed data
+ var index = 0;
+ while ((startPos = content.indexOf('<object', startPos)) != -1) {
+ if (index >= embedList.length)
+ break;
+
+ var attribs = embedList[index];
+
+ // Find end of embed
+ endPos = content.indexOf('>', startPos);
+ endPos += 9;
+
+ // Insert image
+ var contentAfter = content.substring(endPos);
+ content = content.substring(0, startPos);
+ content += '<img width="' + attribs["width"] + '" height="' + attribs["height"] + '"';
+ content += ' src="' + (tinyMCE.getParam("theme_href") + '/images/spacer.gif') + '" title="' + attribs["src"] + '"';
+ content += ' alt="' + attribs["src"] + '" class="ltVideoYouTube" />' + content.substring(endPos);
+ content += contentAfter;
+ index++;
+
+ startPos++;
+ }
+
+ break;
+
+ case "get_from_editor":
+ // Parse all img tags and replace them with object+embed
+ var startPos = -1;
+
+ while ((startPos = content.indexOf('<img', startPos+1)) != -1) {
+ var endPos = content.indexOf('/>', startPos);
+ var attribs = TinyMCE_FlashPlugin._parseAttributes(content.substring(startPos + 4, endPos));
+
+ // Is not flash, skip it
+ if (attribs['class'] != "ltVideoYouTube" && attribs['class'] != "ltVideoGoogleVideo")
+ continue;
+
+ type = attribs['class'];
+
+ endPos += 2;
+
+ var embedHTML = '';
+ var wmode = tinyMCE.getParam("flash_wmode", "transparent");
+ var quality = tinyMCE.getParam("flash_quality", "high");
+ var menu = tinyMCE.getParam("flash_menu", "false");
+
+ embedHTML = getVideoFlashHTML( attribs["title"], attribs["width"], attribs["height"] );
+
+ // Insert embed/object chunk
+ chunkBefore = content.substring(0, startPos);
+ chunkAfter = content.substring(endPos);
+ content = chunkBefore + embedHTML + chunkAfter;
+ }
+ break;
+ }
+
+ // Pass through to next handler in chain
+ return content;
+ },
+
+ handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
+ if (node == null)
+ return;
+
+ do {
+ if (node.nodeName == "IMG" && tinyMCE.getAttrib(node, 'class').indexOf('ltVideoYouTube') == 0) {
+ tinyMCE.switchClass(editor_id + '_flash', 'mceButtonSelected');
+ return true;
+ }
+ } while ((node = node.parentNode));
+
+ tinyMCE.switchClass(editor_id + '_flash', 'mceButtonNormal');
+
+ return true;
+ },
+
+ // Private plugin internal functions
+
+ _parseAttributes : function(attribute_string) {
+ var attributeName = "";
+ var attributeValue = "";
+ var withInName;
+ var withInValue;
+ var attributes = new Array();
+ var whiteSpaceRegExp = new RegExp('^[ \n\r\t]+', 'g');
+
+ if (attribute_string == null || attribute_string.length < 2)
+ return null;
+
+ withInName = withInValue = false;
+
+ for (var i=0; i<attribute_string.length; i++) {
+ var chr = attribute_string.charAt(i);
+
+ if ((chr == '"' || chr == "'") && !withInValue)
+ withInValue = true;
+ else if ((chr == '"' || chr == "'") && withInValue) {
+ withInValue = false;
+
+ var pos = attributeName.lastIndexOf(' ');
+ if (pos != -1)
+ attributeName = attributeName.substring(pos+1);
+
+ attributes[attributeName.toLowerCase()] = attributeValue.substring(1);
+
+ attributeName = "";
+ attributeValue = "";
+ } else if (!whiteSpaceRegExp.test(chr) && !withInName && !withInValue)
+ withInName = true;
+
+ if (chr == '=' && withInName)
+ withInName = false;
+
+ if (withInName)
+ attributeName += chr;
+
+ if (withInValue)
+ attributeValue += chr;
+ }
+
+ return attributes;
+ }
+};
+
+function getVideoFlashHTML( url, width, height )
+{
+content = "<object type=\"application/x-shockwave-flash\" width=\""+width+"\" height=\""+height+"\" data=\""+url+"\">"+
+ "<param name=\"movie\" value=\""+url+"\" />"+
+ "<param name=\"wmode\" value=\"transparent\" />"+
+ "<param name=\"allowScriptAcess\" value=\"sameDomain\" />"+
+ "<param name=\"quality\" value=\"best\" />"+
+ "<param name=\"bgcolor\" value=\"#FFFFFF\" />"+
+ "<param name=\"scale\" value=\"noScale\" />"+
+ "<param name=\"salign\" value=\"TL\" />"+
+ "<param name=\"FlashVars\" value=\"playerMode=embedded\" />"+
+"</object>";
+
+return( content );
+}
+
+tinyMCE.addPlugin("insertvideo", TinyMCE_insertvideoPlugin );
\ No newline at end of file
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/functions.js
===================================================================
--- plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/functions.js 2006-10-03 19:04:27 UTC (rev 4080)
+++ plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/functions.js 2006-10-03 23:09:08 UTC (rev 4081)
@@ -0,0 +1,83 @@
+function init() {
+ tinyMCEPopup.resizeToInnerSize();
+}
+
+function isValidUrl( url )
+{
+ var regexp = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
+ return regexp.test(url);
+}
+
+function getYouTubeLink( url )
+{
+ // check if this is a URL pointing to a youtube link or to a youtube video
+ if( url.substring( 0, 31 ) == "http://www.youtube.com/watch?v=" ) {
+ // and if it's a link to a normal youtube page, build the right link to the video player
+ videoId = url.substring( 31, url.length );
+ url = "http://www.youtube.com/v/" + videoId;
+ }
+ return( url );
+}
+
+function getGoogleVideoLink( url )
+{
+ // check if it's a link to a video page or a link to the video player
+ if( url.substring( 0, 40 ) == "http://video.google.com/videoplay?docid=" ) {
+ // if it's a link to a video page, generate the right one
+ videoId = url.substring( 40, url.length );
+ url = "http://video.google.com/googleplayer.swf?docId=" + videoId;
+ }
+}
+
+function insertVideoCode()
+{
+ // get and check the URL
+ urlField = document.getElementById( "url" );
+ url = urlField.value;
+ if( url == "" || !isValidUrl( url )) {
+ window.alert( "The URL is not valid" );
+ return( false );
+ }
+
+ // check if a destination system was selected
+ youtube = document.getElementById("youtube");
+ gvideo = document.getElementById("gvideo");
+ if( youtube.checked==false && gvideo.checked==false) {
+ window.alert( "You must select one of the video services" );
+ return( false );
+ }
+
+ if( youtube.checked == true ) {
+ link = getYouTubeLink( url );
+ class="ltVideoYouTube";
+ width=425;
+ height=350;
+ }
+ else {
+ link = getGoogleVideoLink( url );
+ class="ltVideoGoogleVideo";
+ width=400;
+ height=326;
+ }
+
+ insertFlash( link, class, width, height );
+}
+
+function insertFlash( url, class, width, height ) {
+
+ var html = '';
+ var file = url;
+
+
+ html += ''
+ + '<img src="' + (tinyMCE.getParam("theme_href") + "/images/spacer.gif") + '" mce_src="' + (tinyMCE.getParam("theme_href") + "/images/spacer.gif") + '" '
+ + 'width="' + width + '" height="' + height + '" '
+ + 'border="0" alt="' + file + '" title="' + file + '" class="'+class+'" />';
+
+ window.alert(html);
+
+ tinyMCEPopup.execCommand("mceInsertContent", true, html);
+ tinyMCE.selectedInstance.repaint();
+
+ tinyMCEPopup.close();
+}
\ No newline at end of file
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/gvideo.png
===================================================================
(Binary files differ)
Property changes on: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/gvideo.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/youtube.png
===================================================================
(Binary files differ)
Property changes on: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/images/youtube.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/videoinput.html
===================================================================
--- plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/videoinput.html 2006-10-03 19:04:27 UTC (rev 4080)
+++ plog/branches/lifetype-1.1.1/js/tinymce/plugins/insertvideo/videoinput.html 2006-10-03 23:09:08 UTC (rev 4081)
@@ -0,0 +1,24 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Insert Video</title>
+ <script language="javascript" type="text/javascript" src="../../tiny_mce_popup.js"></script>
+ <script language="javascript" type="text/javascript" src="functions.js"></script>
+ <base target="_self" />
+</head>
+<body style="display: none">
+ <div align="left">
+ <div class="title">Insert Video<br /><br />
+ </div>
+ Video URL:<br/>
+ <input type="text" id="url" name="url" value="" size="80" /><br/><br/>
+ Source:<br/>
+ <input type="radio" id="youtube" name="type" value="1"><img src="images/youtube.png" alt="YouTube" /> YouTube
+ <input type="radio" id="gvideo" name="type" value="2"><img src="images/gvideo.png" alt="Google Video" /> Google Video
+ <br/>
+ <br/>
+ <div class="mceActionPanel">
+ <input type="button" name="insert" value="Insert Code" onClick="insertVideoCode()" />
+ </div>
+ </div>
+</body>
+</html>
More information about the pLog-svn
mailing list