Created
February 28, 2010 23:56
-
-
Save LouisStAmour/317936 to your computer and use it in GitHub Desktop.
Proof-of-concept alpha of jQuery-oembed integrated with CKeditor on paste or when space is pressed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Auto-Insertion plugin | |
Copyright (c) 2010 Louis St-Amour, but multi-licensed as GPL/LGPL/MPL | |
Embeds: http://code.google.com/p/jquery-oembed/ (MIT License) | |
Plugin for: http://ckeditor.com/license (GPL/LGPL/MPL: http://ckeditor.com/license) | |
*/ | |
(function($) { | |
$.oembedForURL = function(resourceURL, options, callback) { | |
options = $.extend(true, $.fn.oembed.defaults, options); | |
var provider; | |
if (resourceURL != null) { | |
provider = getOEmbedProvider(resourceURL); | |
if (provider != null) { | |
provider.params = getNormalizedParams(options[provider.name]) || {}; | |
provider.maxWidth = options.maxWidth; | |
provider.maxHeight = options.maxHeight; | |
var request = provider.getRequestUrl(resourceURL); | |
$.getJSON(request, function(data) { | |
var oembed = $.extend(data); | |
var code, type = data.type; | |
switch (type) { | |
case "photo": | |
oembed.code = $.fn.oembed.getPhotoCode(resourceURL, data); | |
break; | |
case "video": | |
oembed.code = $.fn.oembed.getVideoCode(resourceURL, data); | |
break; | |
case "rich": | |
oembed.code = $.fn.oembed.getRichCode(resourceURL, data); | |
break; | |
default: | |
oembed.code = $.fn.oembed.getGenericCode(resourceURL, data); | |
break; | |
} | |
callback(resourceURL, oembed.code); | |
}); | |
} | |
} | |
}; | |
$.fn.oembed = function(url, options, callback) { | |
options = $.extend(true, $.fn.oembed.defaults, options); | |
return this.each(function() { | |
var container = $(this), | |
resourceURL = (url != null) ? url : container.attr("href"), | |
provider; | |
if (!callback) callback = function(container, oembed) { | |
$.fn.oembed.insertCode(container, options.embedMethod, oembed); | |
}; | |
if (resourceURL != null) { | |
provider = getOEmbedProvider(resourceURL); | |
if (provider != null) { | |
provider.params = getNormalizedParams(options[provider.name]) || {}; | |
provider.maxWidth = options.maxWidth; | |
provider.maxHeight = options.maxHeight; | |
provider.embedCode(container, resourceURL, callback); | |
return; | |
} | |
} | |
callback(container, null); | |
}); | |
}; | |
// Plugin defaults | |
$.fn.oembed.defaults = { | |
maxWidth: null, | |
maxHeight: null, | |
embedMethod: "replace" // "auto", "append", "fill" | |
}; | |
$.fn.oembed.insertCode = function(container, embedMethod, oembed) { | |
if (oembed == null) | |
return; | |
switch(embedMethod) | |
{ | |
case "auto": | |
if (container.attr("href") != null) { | |
insertCode(container, "append", oembed); | |
} | |
else { | |
insertCode(container, "replace", oembed); | |
}; | |
break; | |
case "replace": | |
container.replaceWith(oembed.code); | |
break; | |
case "fill": | |
container.html(oembed.code); | |
break; | |
case "append": | |
var oembedContainer = container.next(); | |
if (oembedContainer == null || !oembedContainer.hasClass("oembed-container")) { | |
oembedContainer = container | |
.after('<div class="oembed-container"></div>') | |
.next(".oembed-container"); | |
if (oembed != null && oembed.provider_name != null) | |
oembedContainer.toggleClass("oembed-container-" + oembed.provider_name); | |
} | |
oembedContainer.html(oembed.code); | |
break; | |
} | |
} | |
$.fn.oembed.getPhotoCode = function(url, data) { | |
var alt = data.title ? data.title : ''; | |
alt += data.author_name ? ' - ' + data.author_name : ''; | |
alt += data.provider_name ? ' - ' +data.provider_name : ''; | |
var code = '<div><a href="' + url + '" target="_blank"><img src="' + data.url + '" alt="' + alt + '"/></a></div>'; | |
if (data.html) | |
code += "<div>" + data.html + "</div>"; | |
return code; | |
}; | |
$.fn.oembed.getVideoCode = function(url, data) { | |
var code = data.html; | |
return code; | |
}; | |
$.fn.oembed.getRichCode = function(url, data) { | |
var code = data.html; | |
return code; | |
}; | |
$.fn.oembed.getGenericCode = function(url, data) { | |
var title = (data.title != null) ? data.title : url, | |
code = '<a href="' + url + '">' + title + '</a>'; | |
if (data.html) | |
code += "<div>" + data.html + "</div>"; | |
return code; | |
}; | |
$.fn.oembed.isAvailable = function(url) { | |
var provider = getOEmbedProvider(url); | |
return (provider != null); | |
}; | |
/* Private Methods */ | |
function getOEmbedProvider(url) { | |
for (var i = 0; i < providers.length; i++) { | |
if (providers[i].matches(url)) | |
return providers[i]; | |
} | |
return null; | |
} | |
function getNormalizedParams(params) { | |
if (params == null) | |
return null; | |
var normalizedParams = {}; | |
for (var key in params) { | |
if (key != null) | |
normalizedParams[key.toLowerCase()] = params[key]; | |
} | |
return normalizedParams; | |
} | |
var providers = [ | |
new OEmbedProvider("fivemin", "5min.com"), | |
new OEmbedProvider("amazon", "amazon.com"), | |
new OEmbedProvider("flickr", "flickr", "http://flickr.com/services/oembed", "jsoncallback"), | |
new OEmbedProvider("googlevideo", "video.google."), | |
new OEmbedProvider("hulu", "hulu.com"), | |
new OEmbedProvider("imdb", "imdb.com"), | |
new OEmbedProvider("metacafe", "metacafe.com"), | |
new OEmbedProvider("qik", "qik.com"), | |
new OEmbedProvider("revision3", "slideshare"), | |
new OEmbedProvider("slideshare", "5min.com"), | |
new OEmbedProvider("twitpic", "twitpic.com"), | |
new OEmbedProvider("viddler", "viddler.com"), | |
new OEmbedProvider("vimeo", "vimeo.com", "http://vimeo.com/api/oembed.json"), | |
new OEmbedProvider("wikipedia", "wikipedia.org"), | |
new OEmbedProvider("wordpress", "wordpress.com"), | |
new OEmbedProvider("youtube", "youtube.com"), | |
new OEmbedProvider("vids.myspace.com", "vids.myspace.com", "http://vids.myspace.com/index.cfm?fuseaction=oembed"), | |
new OEmbedProvider("screenr", "screenr.com", "http://screenr.com/api/oembed.json") | |
]; | |
function OEmbedProvider(name, urlPattern, oEmbedUrl, callbackparameter) { | |
this.name = name; | |
this.urlPattern = urlPattern; | |
this.oEmbedUrl = (oEmbedUrl != null) ? oEmbedUrl : "http://oohembed.com/oohembed/"; | |
this.callbackparameter = (callbackparameter != null) ? callbackparameter : "callback"; | |
this.maxWidth = 500; | |
this.maxHeight = 400; | |
this.matches = function(externalUrl) { | |
// TODO: Convert to Regex | |
return externalUrl.indexOf(this.urlPattern) >= 0; | |
}; | |
this.getRequestUrl = function(externalUrl) { | |
var url = this.oEmbedUrl; | |
if (url.indexOf("?") <= 0) | |
url = url + "?"; | |
else | |
url = url + "&"; | |
var qs = ""; | |
if (this.maxWidth != null && this.params["maxwidth"] == null) | |
this.params["maxwidth"] = this.maxWidth; | |
if (this.maxHeight != null && this.params["maxheight"] == null) | |
this.params["maxheight"] = this.maxHeight; | |
for (var i in this.params) { | |
// We don't want them to jack everything up by changing the callback parameter | |
if (i == this.callbackparameter) | |
continue; | |
// allows the options to be set to null, don't send null values to the server as parameters | |
if (this.params[i] != null) | |
qs += "&" + escape(i) + "=" + this.params[i]; | |
} | |
url += "format=json&url=" + escape(externalUrl) + | |
qs + | |
"&" + this.callbackparameter + "=?"; | |
return url; | |
} | |
this.embedCode = function(container, externalUrl, callback) { | |
var request = this.getRequestUrl(externalUrl); | |
$.getJSON(request, function(data) { | |
var oembed = $.extend(data); | |
var code, type = data.type; | |
switch (type) { | |
case "photo": | |
oembed.code = $.fn.oembed.getPhotoCode(externalUrl, data); | |
break; | |
case "video": | |
oembed.code = $.fn.oembed.getVideoCode(externalUrl, data); | |
break; | |
case "rich": | |
oembed.code = $.fn.oembed.getRichCode(externalUrl, data); | |
break; | |
default: | |
oembed.code = $.fn.oembed.getGenericCode(externalUrl, data); | |
break; | |
} | |
callback(container, oembed); | |
}); | |
} | |
} | |
})(jQuery); | |
(function() | |
{ | |
var meta = {}; | |
/*{ | |
editorFocus : false, | |
modes : { wysiwyg:1, source:1 } | |
};*/ | |
var autolinkCommand = | |
{ | |
exec : function( editor ) | |
{ | |
var d = editor.getData(), | |
nestCount = 0; | |
for ( var i = 0; i < d.length; i++ ) { | |
if(d.charAt(i) === '<' && d.charAt(i+1) === 'a' ) { | |
nestCount++; | |
} else if(nestCount === 0) { | |
if(d.charAt(i+0) === 'h' | |
&& d.charAt(i-1) !== '"' | |
&& d.charAt(i+1) === 't' | |
&& d.charAt(i+2) === 't' | |
&& d.charAt(i+3) === 'p' | |
&& d.charAt(i+4) === ':' | |
&& d.charAt(i+5) === '/' | |
&& d.charAt(i+6) === '/' ) { | |
// We found a link starting at i! | |
for ( var j = i+6; j < d.length; j++ ) { | |
if(d.charAt(j) === ' ' | |
|| d.charAt(j) === '<' | |
|| d.charAt(j) === '>') { | |
break; | |
} | |
} | |
var url = d.substring(i,j); | |
window.console.log("Found link: "+url); | |
jQuery.oembedForURL(url, null, function(url, oembed) { | |
editor.setData(d.replace(url, "</p><p>"+oembed)); | |
window.console.log("oembed done!"); | |
//window.console.log(oembed); | |
}); | |
i=j; | |
} | |
} else if(d.charAt(i) === '>' && d.charAt(i-1) === 'a') { | |
nestCount--; | |
} | |
} | |
} | |
}; | |
/* | |
var blurBackCommand = | |
{ | |
exec : function( editor ) | |
{ | |
editor.container.focusPrevious( true, editor.tabIndex ); | |
} | |
};*/ | |
CKEDITOR.plugins.add( 'autoinsert', | |
{ | |
requires : [ 'keystrokes' ], | |
init : function( editor ) | |
{ | |
/*var tabSpaces = editor.config.tabSpaces || 0, | |
tabText = ''; | |
while ( tabSpaces-- ) | |
tabText += '\xa0'; | |
if ( tabText ) | |
{*/ | |
editor.on( 'key', function( ev ) | |
{ | |
if ( ev.data.keyCode == 32 ) // SPACE | |
{ | |
window.console.log("Space: "+editor.getData()); | |
editor.execCommand( 'autolink' ); | |
//editor.insertHtml( tabText ); | |
//ev.cancel(); | |
} | |
}); | |
editor.on( 'paste', function( ev ) { | |
setTimeout(function() { | |
window.console.log("Data: "+editor.getData()); | |
editor.execCommand( 'autolink' ); | |
}, 0); | |
}); | |
//} | |
/* | |
if ( CKEDITOR.env.webkit ) | |
{ | |
editor.on( 'key', function( ev ) | |
{ | |
var keyCode = ev.data.keyCode; | |
if ( keyCode == 9 && !tabText ) // TAB | |
{ | |
ev.cancel(); | |
editor.execCommand( 'blur' ); | |
} | |
if ( keyCode == ( CKEDITOR.SHIFT + 9 ) ) // SHIFT+TAB | |
{ | |
editor.execCommand( 'blurBack' ); | |
ev.cancel(); | |
} | |
}); | |
}*/ | |
editor.addCommand( 'autolink', CKEDITOR.tools.extend( autolinkCommand, meta ) ); | |
//editor.addCommand( 'blurBack', CKEDITOR.tools.extend( blurBackCommand, meta ) ); | |
} | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment