Integration of RadActive ILoad Image component in Teleriks RadEditor

Because Telerik doesn’t have an image control in their RadControls for ASP.NET AJAX suite, Milèstre searched on the internet for a control that could be used within Teleriks Content Management System Sitefinity. Finally Milèstre selected I-Load image from RadActive. I-Load is an ASP.NET web control (1.1, 2.0 and 3.5 compatible) which basically:

Allows the final user to upload, crop, resize and rotate/flip images which must respect all the constraints of width, height, aspect ratio, file size and format that you need.
Can automatically generate thumbnails (sometimes many) from the original uploaded image to serve various needs (preview, zoom, icons, etc).

First of all we started to implement the I-Load image control as an addable control in Sitefinity Control toolbox with Control Designer support.
But very soon we realized that implementation of the I-Load image control within RadEditor would be desirable too. With the help of an article we found in the RadActive forum we were able to develop this functionality.

Create the ILoadImage Web User Control

First we started with the development of an usercontrol with the name RadEditorILoadImage.ascx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="RadEditorILoadImage.ascx.vb" Inherits="UserControls_RadEditorILoadImage" %>
<%@ Register TagPrefix="rawcil" Namespace="Radactive.WebControls.ILoad" Assembly="Radactive.WebControls.ILoad" %>
<style type="text/css">
.rade_toolbar.Sitefinity .ILoad
{
   background-image: url(../../images/ILoad.gif);
}
</style>
<div style="display: none;">
    <rawcil:ILoad ID="ILoadImage" runat="server" ShowImageIcon="True" Appearance="Default"
        ShowImageDetails="True" Width="370px">
        <Configuration ManualTemporaryFolder="True" InternalCode="Test_Picture3" GenerateKey="False" GenerateIconImage="True" Title="ILoad Image" KeepSourceImage="False" CutMode="Manual" WebPublishedDestinationFolder="False" GenerateIndexFile="True" OnCompleteBehavior="MoveFilesToDestinationFolder">
         <DestinationFolder UrlMode="Manual" ManualUrl="~/images/fotos" Path="~/images/fotos">
         </DestinationFolder>
         <TemporaryFolder UrlMode="Manual" ManualUrl="~/images/temp" Path="~/images/temp">
         </TemporaryFolder>
            <InputOptions>
             <UploadableFileSizeLimits>
              <HiLimit Enabled="False" Value="2097152">
              </HiLimit>
              <LowLimit Enabled="False" Value="1">
              </LowLimit>
             </UploadableFileSizeLimits>
             <FileExtensionValidator DefaultBehavior="AcceptAll" NotAcceptedFileExtensions="" AcceptedFileExtensions="">
             </FileExtensionValidator>
            </InputOptions>
            <WebImageDefinitions>
             <Radactive.WebControls.ILoad.Configuration.WebImageDefinition InternalCode="mainImage" Title="Main image">
              <SizeConstraint Mode="FixedSize">
               <FixedAspectRatioSizeData Size="400, 300" LimitedDimension="Width">
                <Limits>
                 <HiLimit Enabled="False" Value="400">
                 </HiLimit>
                 <LowLimit Enabled="False" Value="300">
                 </LowLimit>
                </Limits>
               </FixedAspectRatioSizeData>
               <FixedSizeData Size="400, 385">
               </FixedSizeData>
               <FreeSizeData>
                <LimitsH>
                 <HiLimit Enabled="False" Value="400">
                 </HiLimit>
                 <LowLimit Enabled="False" Value="300">
                 </LowLimit>
                </LimitsH>
                <LimitsW>
                 <HiLimit Enabled="False" Value="400">
                 </HiLimit>
                 <LowLimit Enabled="False" Value="300">
                 </LowLimit>
                </LimitsW>
               </FreeSizeData>
              </SizeConstraint>
              <OutputOptions FormatMode="Source" Format="b96b3cae-0728-11d3-9d7b-0000f81ef32e" JPEGQuality="92">
              </OutputOptions>
             </Radactive.WebControls.ILoad.Configuration.WebImageDefinition>
            </WebImageDefinitions>
            <WindowsAppearance>
             <PreviewWindow WindowTitle="I-load - Preview">
             </PreviewWindow>
             <ImageUploadWizardWindow WelcomePageText="" WindowTitle="I-load" ShowSummaryPage="False" ShowImagePreviewBeforeFileUpload="True" ShowWelcomePage="False">
             </ImageUploadWizardWindow>
            </WindowsAppearance>
            <License Number="" Key="">
            </License>
        </Configuration>
     </rawcil:ILoad>
</div>
<script>
    function URLEncode(clearString) {
        var output = '';
        var x = 0;
        clearString = clearString.toString();
        var regex = /(^[a-zA-Z0-9_.]*)/;
        while (x < clearString.length) {
            var match = regex.exec(clearString.substr(x));
            if (match != null && match.length > 1 && match[1] != '') {
                output += match[1];
                x += match[1].length;
            } else {
                if (clearString[x] == ' ')
                    output += '+';
                else {
                    var charCode = clearString.charCodeAt(x);
                    var hexVal = charCode.toString(16);
                    output += '%' + (hexVal.length < 2 ? '0' : '') + hexVal.toUpperCase();
                }
                x++;
            }
        }
        return output;
    }

    Radactive_WebControls_ILoad.prototype.AddImage_Return = function(iload_result) {
        if (iload_result.completed) {
            var webImage = new WebImage(iload_result.index);
            this.SetValue(iload_result.controlId, webImage);

            if (window.lastEditor) {
                var myResize = webImage.SelectedImage();

                //Because ILoad is used in sitefinity/admin path this must be removed from FileUrl
                var fileUrl = myResize.FileUrl();
                fileUrl = fileUrl.replace("/sitefinity/admin", "");

                if (window.lastImageObject) {
                    window.lastImageObject.src = fileUrl;
                    window.lastImageObject.width = myResize.Size.Width;
                    window.lastImageObject.heigth = myResize.Size.Heigth;
                    window.lastImageObject.style.width = myResize.Size.Width + "px";
                    window.lastImageObject.style.heigth = myResize.Size.Heigth + "px";
                }
                else {
                    //Because the ILoad image do have a fixed size (400,385) it will be presented in the content window also with a fixed size
                    var tag = "<a href=\"#\"><img src=\"" + fileUrl + "\" border=\"0\" width=\"150\" height=\"144\" alt=\"\" border=\"0\" onclick=\"return ShowImageForm('/imagepreview.aspx?src=" + URLEncode(fileUrl) + "');\" ondblclick=\"if (window.parent.iloadEditImage){window.parent.iloadEditImage(window.event, \'" + window.lastEditor.get_id() + "\');}\"><\a>";
                    window.lastEditor.pasteHtml(tag);
                }
            }
        }
    }
    function iloadEditImage(e, editorId) {
        if (!e) {
            return;
        }
        if (!e.srcElement) {
            return;
        }
        if (e.srcElement.tagName != "IMG") {
            return;
        }
        var editor = $find(editorId);
        if (!editor) {
            return;
        }
        window.lastImageObject = e.srcElement;
        window.lastEditor = editor;
        Radactive.WebControls.ILoad.AddImage("<%=ILoadImage.ClientID%>");
    }
</script>
<script type="text/javascript" language="javascript">
//<![CDATA[
RadEditorCommandList["ILoad"] = function(commandName, editor, oTool)
{
        window.lastImageObject = null;
  window.lastEditor = editor;
  Radactive.WebControls.ILoad.AddImage("<%=ILoadImage.ClientID%>");
};
//]]>
</script>

No CodeBehind necessary

Change the code of Sitefinity\Admin\ControlTemplates\Generic_Content\EditorTemplate.ascx

The ILoad image user control will be added to the EditorTemplate control. You can find in red the changes that are made.

<%@ Register Src="~/UserControls/RadEditorILoadImage.ascx" TagName="RadEditorILoadImage" TagPrefix="uc1" %>
<div class="ctrlPropsGeneric">
<telerik:RadEditor
    runat="server"
    ID="RadEditor1"
    ToolsFile="~/GenericContentFiles/EditorToolsFile.xml"
    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/Prometheus/Default2006/EditorContentArea.css"
    EnableEmbeddedSkins="False" Skin="Sitefinity"
    NewLineBr="False"
    Height="360px"
    Width="98%">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" MaxUploadFileSize="10485760" />
    <CssFiles>
        <telerik:EditorCssFile Value="~/StyleSheets/contentstyles.css" />
    </CssFiles>
    <Content>
  <div class="halfL">
    <h2>Location Map:</h2>
    <img title="Location Map" style="display: block; margin-top: 4px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; " alt="Map" src=":2349/Images/location.gif" />
    <br />
    <br />
  </div>
  <div class="halfR">
    <h2>General:</h2>
    <address>Telerik International University<br />143 Brooks Street, Suite 2<br />Brighton Street, 90-643<br />Telerik<br />Phone: 2-253-253-3654<br />Fax: 2-253-253-8712<br />Email: <a href="mailto:info@telerik.edu">info@telerik.edu</a> </address>
    <h2>Admissions:</h2>
    <address>Director of Admissions<br />Phone: 2-253-253-7934<br />Fax: 2-253-253-0578<br />Email: <a href="mailto:admissions@telerik.edu">admissions@telerik.edu</a> </address>
    <h2>Executive:</h2>
    <address>Executive Director<br />Phone: 2-253-253-9153<br />Fax: 2-253-253-6024<br />Email: <a href="mailto:executive@telerik.edu">executive@telerik.edu</a> </address>
  </div>
  <div class="clear">
    
  </div>
</Content>
</telerik:RadEditor>
<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();

        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                editor.get_Document().replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
        }
        editor.showExternalDialog(
   '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>',
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   true,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   false)
    };

    Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();

        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                editor.get_Document().replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
        }
        editor.showExternalDialog(
   '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>',
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   false,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   false)
    };

    Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();

        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                editor.get_Document().replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
        }
        editor.showExternalDialog(
   '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   false,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   false)
    };

    Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();

        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                editor.get_Document().replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
        }
        editor.showExternalDialog(
   '<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   false,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   false)
    };

    RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool) {
        var currentWidth = editor.GetWidth(); //get the width of Telerik RadEditor
        var currentHeight = editor.GetHeight(); //get the heigh of Telerik RadEditor

editor.SetSize(currentWidth, currentHeight + 30); //set the height size of the editor to increase with 30px
};

    RadEditorCommandList["DecreaseSize"] = function(commandName, editor, oTool) {
        var currentWidth = editor.GetWidth();
        var currentHeight = editor.GetHeight();

        editor.SetSize(currentWidth, currentHeight - 30); //set the height size of the editor to decrease with 30px
    };
    var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function

    Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args) {
        oldFunction(commandName, editor, args);
        var bd = document.getElementsByTagName("body")[0];

        if (/fullScreenMode/.test(bd.className)) {
            var rep = bd.className.match(' ' + 'fullScreenMode') ? ' ' + 'fullScreenMode' : 'fullScreenMode';
            bd.className = bd.className.replace(rep, '');

        } else {
            bd.className += bd.className ? ' ' + 'fullScreenMode' : 'fullScreenMode';
        }
    };
</script>
</div>
<div class="footLinks">
    <p id="SharedContentInfo" runat="server"><strong><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:SharedContentInfo %>"></asp:Literal></strong></p>
    <asp:LinkButton ID="ShareContent" CommandName="ShareContent" Text="<%$Resources:ShareThisContent %>" runat="server" CssClass="share"></asp:LinkButton>
    <asp:LinkButton ID="SelectContent" CommandName="SelectContent" Text="<%$Resources:SelectSharedContent %>" runat="server" CssClass="select"></asp:LinkButton>
</div>
<uc1:RadEditorILoadImage ID="uxRadEditorILoadImage" runat="server" />

Add a I-Load image button in the RadEditor toolbarFirst define an icon image and copy it in the images directory with the name ILoad.gif

Because we defined that the EditorToolsFile.xml can be found in the GenericContentFiles directory, you first must copy the Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml to the GenericContentFiles directory in the root of the website. However this is not necessary: you can leave the file but then you must change the ToolsFile="~/GenericContentFiles/EditorToolsFile.xml" in the editorTemplate.ascx.

<root>
<tools dockable="false">
    <tool name="Bold" shortcut="CTRL+B"/>
    <tool name="Italic" shortcut="CTRL+I"/>
    <tool name="Underline" shortcut="CTRL+U"/>
    <tool name="StrikeThrough" enabled="false" />
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool name="JustifyFull" />
    <tool name="JustifyNone" />
    <tool name="Indent" />
    <tool name="Outdent" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true"/>
</tools>
<tools name="MainToolbar" dockable="false">
    <tool name="AjaxSpellCheck" shortcut="F7" />
    <tool name="FindAndReplace" shortcut="CTRL+F" />
    <tool separator="true" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" shortcut="CTRL+V" />
    <tool name="PasteFromWord" />
    <tool name="PasteFromWordNoFontsNoSizes" />
    <tool name="PastePlainText" />
    <tool name="PasteAsHtml" />
    <tool separator="true"/>
    <tool name="Undo" shortcut="CTRL+Z"/>
    <tool name="Redo" shortcut="CTRL+Y"/>
    <tool separator="true"/>
</tools>
<tools name="InsertToolbar" dockable="false">
<tool name="ILoad" />
<tool name="ImageManager" shortcut="CTRL+G"/>
    <tool name="ImageMapDialog" />
    <tool name="AbsolutePosition" />
    <tool separator="true" />
    <tool name="FlashManager" />
    <tool name="MediaManager" />
    <tool name="DocumentManager" />
    <tool name="TemplateManager" />
    <tool name="LinkManager" shortcut="CTRL+K"/>
    <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
</tools>
<tools dockable="false">
    <tool name="ConvertToLower" />
    <tool name="ConvertToUpper" />
    <tool separator="true" />
    <tool name="InsertTable" />
    <tool name="InsertSnippet" />
    <tool name="InsertFormElement" />
    <tool name="InsertSymbol" />
</tools>
<tools name="DropdownToolbar" dockable="false">
    <tool name="ForeColor" />
    <tool name="BackColor" />
    <tool separator="true" />
    <tool name="FontName" />
    <tool name="FontSize" />
    <tool name="ApplyClass" />
    <tool name="InsertCustomLink" />
    <tool name="FormatBlock" />
    <tool name="FormatStripper" />
</tools>
<tools name="DialogToolbar">
    <tool name="Print" shortcut="CTRL+P"/>
    <tool name="Superscript" />
    <tool name="Subscript" />
    <tool name="InsertParagraph" />
    <tool name="InsertHorizontalRule" />
    <tool name="InsertDate" />
    <tool name="InsertTime" />
    <tool separator="true"/>
    <tool name="AboutDialog" />
    <tool name="Help" shortcut="F1"/>
</tools>
<tools name="EnhancedEditToolbar" dockable="true">
    <tool name="ToggleScreenMode" shortcut="F11"/>
    <tool name="ToggleTableBorder" />
    <tool name="Zoom" />
    <tool name="ModuleManager" />
    <tool name="ToggleDocking" />
    <tool name="RepeatLastCommand" shortcut="F4"/>
</tools>
<tools>
    <tool name="StyleBuilder" text="Style Builder" />
    <tool name="XhtmlValidator" text="Xhtml Validator Dialog" />
    <tool name="TrackChangesDialog" text="Track Changes Dialog" />
    <tool name="FormatCodeBlock" text="Format Code Block Dialog" />
</tools>
<tools>
    <tool name="SetImageProperties" />
    <tool separator="true"/>
    <tool name="TableWizard" />
    <tool name="PageProperties" />
</tools>
<links>
    <link name="telerik" href="http://www.telerik.com">
      <link name="Products" href="http://www.telerik.com/products">
        <link name="r.a.d.controls suite" href="http://www.telerik.com/radcontrols" />
        <link name="r.a.d.navigation suite" href="http://www.telerik.com/radnavigation" />
        <link name="r.a.d.editor" href="http://www.telerik.com/radeditor" />
        <link name="r.a.d.designer" href="http://www.telerik.com/raddesigner" />
        <link name="r.a.d.spell" href="http://www.telerik.com/radspell" />
        <link name="r.a.d.chart" href="http://www.telerik.com/radchart" />
        <link name="r.a.d.menu" href="http://www.telerik.com/radmenu" />
        <link name="r.a.d.treeview" href="http://www.telerik.com/radtreeview" />
        <link name="r.a.d.panelbar" href="http://www.telerik.com/radpanelbar" />
        <link name="r.a.d.rotator" href="http://www.telerik.com/radrotator" />
        <link name="r.a.d.tabstrip" href="http://www.telerik.com/radtabstrip" tooltip="Tooltip" />
      </link>
      <link name="Purchase" href="http://www.telerik.com/purchase" />
      <link name="Support" href="http://www.telerik.com/support" />
      <link name="Client.Net" href="http://www.telerik.com/clientnet" />
    </link>
    <link name="Microsoft">
      <link name="Main Site" href="http://www.microsoft.com" />
      <link name="MSDN Online" href="http://msdn.microsoft.com" />
      <link name="Windows Update" href="http://windowsupdate.microsoft.com" />
    </link>
    <link name="Search Engines">
      <link name="Google" href="http://www.google.com" />
      <link name="Yahoo" href="http://www.yahoo.com" />
      <link name="AltaVista" href="http://www.altavista.com" />
    </link>
</links>
<snippets>
    <snippet name="Order Confirmation">
      <![CDATA[
     <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
     Dear ____________________,<br />
     Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.
     <br /><br />
      <b>Please, contact us if you have any problems.</b>
     </div>
    ]]>
    </snippet>
    <snippet name="Email Signature">
      <![CDATA[
     <div style="margin-top:30px;width:80%;border-top:1px dotted gray;padding-top:4px;font-family:Arial, Verdana; font-size:11px;">
     <b>John Wigham</b><br />
     Senior Web Developer<br />
      <a href="#">john@mysite.com</a>
      <br />
       <br />
        <i>Disclaimer: The contents of this e-mail are privileged and confidential and intended for the addressees at the specified e-mail addresses only.</i>
     </div>
    ]]>
    </snippet>
    <snippet name="Problem Report Feedback">
      <![CDATA[
     <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
     Hi ____________________,<br />
     Thank you for reporting this issue. We have verified the problem and it is logged in our system. We will notify you once we have a solution.
     <br /><br />
      <b>Please, contact us if you have any problems.</b>
     </div>
    ]]>
    </snippet>
</snippets>
<symbols>
    <symbol value="\u00E1" />
    <symbol value="\u00E2" />
    <symbol value="\u00E3" />
    <symbol value="\u00E4" />
    <symbol value="\u00E5" />
    <symbol value="\u00E6" />
    <symbol value="\u00E7" />
    <symbol value="\u00E8" />
    <symbol value="\u00E9" />
    <symbol value="\u00EA" />
    <symbol value="\u00EB" />
    <symbol value="\u00EC" />
    <symbol value="\u00ED" />
    <symbol value="\u00EE" />
    <symbol value="\u00EF" />
    <symbol value="\u00F1" />
    <symbol value="\u00F2" />
    <symbol value="\u00F3" />
    <symbol value="\u00F4" />
    <symbol value="\u00F5" />
    <symbol value="\u00F6" />
    <symbol value="\u00F8" />
    <symbol value="\u00F9" />
    <symbol value="\u00FA" />
    <symbol value="\u00FB" />
    <symbol value="\u00FC" />
    <symbol value="\u00A3" />
    <symbol value="\u00A7" />
    <symbol value="\u00A9" />
    <symbol value="\u00AE" />
    <symbol value="\u00B0" />
    <symbol value="\u00BC" />
    <symbol value="\u00BD" />
    <symbol value="\u00BE" />
    <symbol value="\u00C0" />
    <symbol value="\u00C1" />
    <symbol value="\u00C2" />
    <symbol value="\u00C3" />
    <symbol value="\u00C4" />
    <symbol value="\u00C5" />
    <symbol value="\u00C6" />
    <symbol value="\u00C7" />
    <symbol value="\u00C8" />
    <symbol value="\u00C9" />
    <symbol value="\u00CA" />
    <symbol value="\u00CB" />
    <symbol value="\u00CC" />
    <symbol value="\u00CD" />
    <symbol value="\u00CE" />
    <symbol value="\u00CF" />
    <symbol value="\u00D2" />
    <symbol value="\u00D3" />
    <symbol value="\u00D4" />
    <symbol value="\u00D5" />
    <symbol value="\u00D6" />
    <symbol value="\u00D7" />
    <symbol value="\u00D8" />
    <symbol value="\u00D9" />
    <symbol value="\u00DA" />
    <symbol value="\u00DB" />
    <symbol value="\u00DC" />
    <symbol value="\u00E0" />
</symbols>
<fontNames> </fontNames>
<fontSizes>
</fontSizes>
<realFontSizes>
    <item value="11px"></item>
    <item value="12px"></item>
    <item value="13px"></item>
    <item value="14px"></item>
    <item value="18px"></item>
    <item value="22px"></item>
</realFontSizes>
<colors>
    <color value="#44555F" />
    <color value="#61574A" />
    <color value="#C5B8B2" />
    <color value="#3E2E01" />
</colors>
<paragraphs></paragraphs>
<classes>
    <class name="Add CssClasses collection here:" value=".attention" />
   <class name="maincontenttext" value=".maincontenttext" />
   <class name="maincontenttextsmall" value=".maincontenttextsmall" />
   <class name="maincontenttextcolor" value=".maincontenttextcolor" />
   <class name="maincontenttitle" value=".maincontenttitle" />
   <class name="maincontenttitlelarge" value=".maincontenttitlelarge" />
</classes>
<dialogParameters></dialogParameters>
<languages></languages>
<contextMenus>
</contextMenus>
</root>
<!-- ==============================================================================================
The ToolsFile must have a valid structure as shown below
All attributes and their values are case sensitive!
<root>
<modules>
    <module />
    <module/>
</modules>
<tools>
    <tool />
    <tool />
     ...
</tools>
...
<colors>
    <color/>
    <color/>
</colors>
</root>

<tool> element valid attributes:

name (required): Bold Italic Underline StrikeThrough Superscript Subscript
JustifyLeft JustifyCenter JustifyRight JustifyFull InsertOrderedList InsertUnorderedList
Outdent Indent Cut Copy Paste PasteFromWord
PastePlainText PasteAsHtml Print Undo Redo ImageManager
AbsolutePosition LinkManager Unlink InsertBoldHorizontalRule InsertTable ToggleTableBorder
FormatBlock ApplyClass FontName FontSize InsertCustomLink Custom
InsertSymbol BackColor ForeColor FlashManager MediaManager SpellCheck
FormatStripper InsertParagraph InsertSnippet Help FindAndReplace DocumentManager
PasteFromWordNoFontsNoSizes InsertFormElement InsertDate InsertTime TemplateManager ToggleScreenMode
Zoom ModuleManager ToggleDocking RepeatLastCommand AboutDialog

title
(not required):
Some hint string for this tool.

shortcut
(not required):
The key combination for the specific tool. Examples:
<tool name="TemplateManager" shortcut="Ctrl+Shift+Alt+N"/>
<tool name="LinkManager" shortcut="Ctrl+L" />

<separator> element
true/false Indicates whether a separator should appear at current position.

<tools> element valid attributes:
name (required): This string will identify the toolbar.
enabled (not required): true/false (Indicates whether the tool will be available on the client or not)
visible (not required):
true/false (Indicates whether the tool should appear in the toolbar or not. This toolbar will be available client-side - the property defines only the visibility of the tool.)
dockable (not required):
true/false (Indicates whether you will be able to drag&drop the toolbar to the docking zones)

<module> element valid attributes:
(module elements should appear as child elements of an element "modules")
name (required):
The friendly name of the module. When in floating mode the name will appear in the tool's titlebar.
dockable (not required):
(Indicates whether you will be able to drag&drop the tool to the docking zones)
enabled (not required):
(Indicates whether the module will be available on the client or not)
visible (not required):
(Indicates whether the module should appear in the toolbar or not. This module will be available client-side - the property defines only the visibility of the module. )

<font> element valid attributes:
(font elements should appear as child elements of a tool element with "name" attribute set to "fontNames")
name (required):
Font Name

<class> element valid attributes:
(class elements should appear as child elements of an element "classes")
name (required):
Class Alias
value (required):
Class Name

<paragraph> element valid attributes:
(paragraph elements should appear as child elements of an element "paragraphs")

name (required):
Paragraph Alias
value (required):
Paragraph Name

<color> element valid attributes:
(color elements should appear as child elements of an element "colors")
value (not required):
Hex value of the color

<snippet> element valid attributes:
(snippet elements should appear as child elements of an element "snippets")
name (required):
Snippet Alias

<language> element valid attributes:
(language elements should appear as child elements of an element "Languages")
code (required):
Language code
title (required):
Language Title

The contextMenus tag in the Tools file allows you to change the default or specify custom context menus for different HTML elements.
<contextMenu > element valid attributes:
(contextMenu elements should appear as child elements of an element "contextMenus")
forElement (required):
The HTML element that will call this menu.
enabled (required):
Defines if this context menu is switched.

The example below shows how to attach custom context menus for <A> and <P> elements.

Create ImagePreview Web User control to show the large image in a popup

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="imagepreview.aspx.vb" Inherits="imagepreview" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

No CodeBehind necessary

Instead of this standard popup window you could use Telerik RadWindow too.