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 release
The code below makes now use of the implemented imagetester webform to check if the file actually is a thumbnail of a larger image
  1. Create a file editor.js in a folder called js in the skin diretory of your current DNN skin
  2. In your editor configuration set the property ScriptToLoad to "js/editor.js"
  3. In your editor configuration set the property OnClientPasteHtml to "OnClientPasteHtml"
  4. 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.html

Then 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 ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
                });


Now when you want to add an image with that effect make sure that you have two images in place: 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!