Skip to content

Instantly share code, notes, and snippets.

@LouisStAmour
Created February 28, 2010 23:56
Show Gist options
  • Save LouisStAmour/317936 to your computer and use it in GitHub Desktop.
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.
/*
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