In this example I'm gonna show you how to work with custom client side code in the RadEditor.
Goal: We want to have a FancyBox style popup that show a large image file when clicking on a thumbnail. Follow these steps to achieve the desired behaviour:
Updated for the 01.01.03 releaseThe code below makes now use of the implemented imagetester webform to check if the file actually is a thumbnail of a larger image
- Create a file editor.js in a folder called js in the skin diretory of your current DNN skin
- In your editor configuration set the property ScriptToLoad to "js/editor.js"
- In your editor configuration set the property OnClientPasteHtml to "OnClientPasteHtml"
- In the editor.js file put in the following code:
// this is what will come in between the rel tag of the image link
// this will cause the jQuery plugin to fire on those links
var relTag = 'img_group';
// this is the url that we send our testcalls to
// e.g. check wether a large image file exists on the server
var testUrl = '/Desktopmodules/dnnWerk.RadEditorProvider/ImageTester.aspx';
// this is the method to be called whenever something is being pasted into the editor
// note that this can be extended by adding something similar like
// "if (commandName == "ImageManager")" for the media mananger: "if (commandName == "MediaManager")"
function OnClientPasteHtml(sender, args)
{
var commandName = args.get_commandName();
var value = args.get_value();
if (commandName == "ImageManager")
{
//See if an img has an alt tag set
var div = document.createElement("DIV");
//Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
//This is a severe IE quirk.
Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
var img = div.firstChild;
if (img) {
var href;
var replace = false;
href = img.src.replace(/_thumb.gif/g, '.gif');
href = href.replace(/_thumb.jpg/g, '.jpg');
href = href.replace(/_thumb.png/g, '.png');
href = href.replace(/_thumb.JPG/g, '.jpg');
href = href.replace(/_thumb.PNG/g, '.png');
href = href.replace(/_thumb.GIF/g, '.gif');
if (href != img.src) {
//only attempt to create link to large image if it is another file than the source file
//we ue an ajax call to our tester page if that file exists
jQuery.ajax({
url: testUrl,
cache: false,
data: ({ file: href }),
dataType: 'text',
async: false, //must no be async because we want our variable to be populated correctly
success: function(data) {
if (data == 'OK') {
//image exists
replace = true;
}
}
});
if (replace == true)
{
//this is the new markup, rel="img_group" cause the jquery plugin to fire on the image link
var html = '<a rel="' + relTag + '" href="' + href + '">' + value + '</a>';
//write back to the editor
args.set_value(html);
}
}
}
}
}
For more information about the event have a look at the onlinehelp for the editor itself:
http://www.telerik.com/help/aspnet-ajax/onclientpastehtml.htmlThen find a way to load the following jQuery code in your skin, make also sure you load the FancyBox plugin.
jQuery(document).ready(function() {
$("a[rel=img_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
Now when you want to add an image with that effect make sure that you have two images in place:
- image.jpg
- image_thumb.jpg
Place the image_thumb,jpg into the editor by using the image manager. The script will add the necessary markup to your image to fire the FancyBox scripts. That easy!