<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .RadSpell_Default_Ext.spButton
    {
        background-color: red;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

     <telerik:radeditor runat="server" ID="RadEditor1" OnTextChanged="RadEditor1_TextChanged" >   
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="InsertSpecialLink" Text="Insert Special Link" />
            </telerik:EditorToolGroup>
        </Tools>
        <Content>
        <img alt="product logo" src="../../Img/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
        <ul>
            <li><em>Single-file, drag-and-drop deployment</em></li>
            <li><em>Built on top of <a href="http://asp.net/ajax">ASP.NET AJAX</a></em></li>
            <li><em>Unmatched loading speed with new semantic rendering </em></li>
            <li><em>Full keyboard accessibility</em></li>
            <li><em>Flexible Skinning mechanism</em></li>
            <li><em>Simplified and intuitive toolbar configuration</em></li>
            <li><em>Out-of-the-box XHTML-enabled output</em></li>
            </ul>
        </Content>
    </telerik:radeditor>
    <asp:Button ID="test1" Text="Submit" runat="server" />
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["InsertSpecialLink"] = function(commandName, editor, args)
    {
       var elem = editor.getSelectedElement(); //returns the selected element.
              
       if (elem.tagName == "A")
       {
            editor.selectElement(elem);
            argument = elem;
       }
       else
       {
          var content = editor.getSelectionHtml(); 
          var link = editor.get_document().createElement("A");
          link.innerHTML = content;          
          argument = link;
       }
       
       var myCallbackFunction = function(sender, args)
       {
           editor.pasteHtml(String.format("<a href={0} target='{1}' class='{2}'>{3}</a> ", args.href, args.target, args.className, args.name))
       }
       editor.showDialog("InsertSpecialLink", argument, myCallbackFunction);
    };
     </script>
    </form>
</body>
</html>

