Custom Links - Best Practices

[Peter Zolja]

Hi guys,

We're looking into building a mini CMS for one of our sites. This site allows custom URLs (with URL rewriting) with the content and pages in a database. So the client can change a page's url from "/folder/page1.aspx" to "/otherfolder/page2.aspx" by simply using the interface in the admin section.

Now, the problem is linking between pages. All the links in the HTML blocks are pretty much hardcoded. If the client renames a page we would have broken links, and we're trying to avoid that.

As a solution we're looking at preventing direct links; so instead of href="/folder/page1.aspx" originalAttribute="href" originalPath="/folder/page1.aspx" we would have something like href="{{node:332}}". originalAttribute="href" originalPath=""{{node:332}}"." Then the parser would go through all the links in the page and replace those with actual URLs.

This wouldn't be an issue if the pages would be edited by developers or web designers. We need to make linking to existing pages as easy as possible. We've looked at the RadEditor and saw that it had the ability to create custom windows. Is it flexible enough to allow us to redefine how links are built, and how hard would that be? Any samples?

If you know of a better way to solve this problem please let us know. How do the big guys do this?

Thank you. 

[Peter Zolja]

I don't know where those "originalAttribute"s came from cause I didn't type them :)

[Rumen]

Hi Peter,

The easiest way is to define your custom links in the Insert Custom Links dropdown of RadEditor, e.g.

<telerik:radeditor runat="server" ID="RadEditor1">
    <Links>
        <telerik:EditorLink Href="{{node:332}}" Name="link 1"></telerik:EditorLink>
    </Links>
</telerik:radeditor>

Of course, you can create your own custom link dialog, but you will need to write code.

The editor will not modify your custom links

<a href="{{node:332}}">link 1</a>

and you will be able to change the href token {{node:332}} on the server.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Peter Zolja]

Thanks for your reply -- and I apologize for responding so late.

The custom links is not practical for my scenario, but I've found a tutorial in the documentation on how to "Add Custom Dialogs"; that is what I'm looking for.

I've implemented the tutorial to the letter and it works. However, if, after inserting the link, I select the link and then click on "LinkManager"  in IE and FF I get a JS error:

IE: Sys.ArgumentNullException: Dialog Parameters for the LinkManager dialog do not exist. Parameter name: dialogName

FF:
Error: [Exception... "'Sys.ArgumentNullException: Sys.ArgumentNullException: Dialog Parameters for the LinkManager dialog do not exist
Parameter name: dialogName' when calling method: [nsIDOMEventListener::handleEvent]"  nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)"  location: "<unknown>"  data: no]

If clicking the "LinkManager" button would bring up my custom link manager it would be perfect.

I appreciate any suggestions.
Thanks.

[Rumen]

Hello Peter,

Our suggestion is to not create a custom dialog but just override the command of the built-in Link manager dialog of RadEditor "Prometheus" and in the callback function to make the desired link changes. You can easily do that with the code below:

<telerik:radeditor runat="server" OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1">
<Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="LinkManager" />
    </telerik:EditorToolGroup>
</Tools>
</telerik:radeditor>
<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
    var commandName = args.get_commandName();
    if (commandName != "LinkManager") return;
                           
    //Replace the showDialog function with a modified one   
    if (!editor.oldShowDialog)
    {
        editor.oldShowDialog = editor.showDialog;       
        editor.showDialog = function(dialogName, argument, callbackFunction)
        {
            if (commandName == "LinkManager")
            {
                callbackFunction = function(sender, args)
                {
                    var href = args.realLink.href; //var href = "{{node:332}}";
                    var name = args.realLink.innerText
                    var target = args.realLink.target                      
                    editor.pasteHtml("<a href=" + href + " target=" + target + ">" + name + "</a>");                                                                                 
                }               
            }
           
            //Call original dialog function
            editor.oldShowDialog(dialogName, argument, callbackFunction);           
        }
    }           
}
</script>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Peter Zolja]

Awesome! However, I still need the custom dialog because I need to show the nodes in the site with a nice UI etc. I need both the built-in link manager and a custom one.

When I have given link <a href="{{something}}">test</a> I need to determine if I should show the custom dialog or the built-in link manager. I can do that by looking at the url and seeing if it starts with "{{"; this part works. Where I got stuck is showing the custom dialog from within the OnClientCommandExecuting. Here's what I have so far:

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{    
    var commandName = args.get_commandName();
    if (commandName != "LinkManager") return;
                           
    //Replace the showDialog function with a modified one
    if (!editor.oldShowDialog)
    {       
        editor.oldShowDialog = editor.showDialog;       
        editor.showDialog = function(dialogName, argument, callbackFunction)
        {
            if (commandName == "LinkManager")
            {
                callbackFunction = function(sender, args)
                {
                    var href = args.realLink.href; //var href = "{{node:332}}";
                    var name = args.realLink.innerText
                    var target = args.realLink.target                      
                    editor.pasteHtml("<a href=" + href + " target=" + target + ">" + name + "</a>");                                                                                 
                }               
            }
           
            if (argument.realLink.pathname.substring(0, 2) == "{{")
            {
              alert('show custom');
              // How do I show the custom InsertSpecialLink dialog from here?
              return;
            }
            else
              alert('show built-in');
           
            //Call original dialog function
            editor.oldShowDialog(dialogName, argument, callbackFunction);           
        }
    }           
}

Telerik.Web.UI.Editor.CommandList["InsertSpecialLink"] = function(commandName, editor, args)
{
   var myCallbackFunction = function(sender, args)
   {
       editor.pasteHtml(String.format("<a href={0}>{1}</a> ", args.href, args.text))
   }
  editor.showDialog("InsertSpecialLink", {}, myCallbackFunction);
};

</script>

The dialog works fine if I click the button in the toolbar, but I need to somehow show it from the LinkManager command name.

Thank you!

[Peter Zolja]

I almost got it to work, here's what I got so far:

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
    var commandName = args.get_commandName();
    if (commandName != "LinkManager") return;

    //Replace the showDialog function with a modified one
    if (!editor.oldShowDialog)
    {
        editoreditor.oldShowDialog = editor.showDialog;
        editor.showDialog = function(dialogName, argument, callbackFunction)
        {
            if (commandName == "LinkManager")
            {
                callbackFunction = function(sender, args)
                {
                    var href = args.realLink.href; //var href = "{{node:332}}";
                    var name = args.realLink.innerText
                    var target = args.realLink.target
                    editor.pasteHtml("<a href=" + href + " target=" + target + ">" + name + "</a>");
                }
            }

            if (argument.realLink.pathname.substring(0, 2) == "{{")
            {
              // Show custom dialog
              editor.oldShowDialog("InsertSpecialLink", argument, mySpecialCallbackFunction);
              return;
            }

            //Call original dialog function
            editor.oldShowDialog(dialogName, argument, callbackFunction);
        }
    }
}

function mySpecialCallbackFunction(sender, args)
{
  alert(args.realLink.pathname);

  var href = args.realLink.href; // will be "{{changed}}"
  var name = args.realLink.innerText
  var target = args.realLink.target
  var editor = $find("<%=re.ClientID%>");
  editor.pasteHtml("<a href=" + href + " target=" + target + ">" + name + "</a>");
}

var myFunction = function(commandName, editor, args)
{
   var myCallbackFunction = function(sender, args)
   {
       editor.pasteHtml(String.format("<a href={0}>{1}</a> ", args.href, args.text))
   }

  editor.showDialog("InsertSpecialLink", args, myCallbackFunction);
};

Telerik.Web.UI.Editor.CommandList["InsertSpecialLink"] = myFunction;

</script>

I'm basically guessing my way around so more than likely I'm not doing it the right way -- please correct me.

This works, somewhat; there's a bug that I can't reproduce yet. I will let you know as soon as I find out more.

Thanks.

[Peter Zolja]

I believe there's a problem with the LinkManager/editor -- not sure where the problem is, but here's how to reproduce:

1) Go to any of the demo for the editor (here for example http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/Default/DefaultCS.aspx)
2) Go to HTML view and replace the text with this:
<a href="telerik.com">text<img alt="product logo" src="../../Img/productLogoLight.gif" /></a>
3) Go back to design view and make sure the caret is somewhere inside "text"
4) Click on the LinkManager button and change the URL to telerik2.com (or anything else) and click OK
5) Now go to HTML view, the text was changed to:
"<a href="telerik2.com">text<img alt="product logo" src="../../Img/productLogoLight.gif" /></a><a href="telerik.com"></a>" -- notice how we have two anchors now.

The odd part is that it doesn't always do it, but I can reproduce this pretty frequently; and it seems to be an IE7 only issue, couldn't reproduce with FF.

[Rumen]

Hi,

Thank you for reporting this problem.

I was able to reproduce it and I logged it in our bug tracking system. I also noticed that this problem is not persistent and appears sporadically. We will try to fix the problem in one of the upcoming hotfixes of the control.

My suggestion is to temporary set the link url trough the Properties Inspector module which works properly in this scenario.

We do appreciate your bug report and we updated your telerik points.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Peter Zolja]

Inside "OnClientCommandExecuting" the function assigned to editor.showDialog has an argument parameter. Using this argument I can, in IE7, extract the "realLink" value like this: "argument.realLink.pathname".

In IE7 I get the value that is typed in the url box (for example "{{aaa,00}}" assuming href="{{aaa,000}}"). With FF I get a different url, in this case I would get "/Folder1/Folder2/%7B%7Baaa,000%7D%7D" -- which I imagine is the full encoded path.

My question is how I can get to the url in FF (tested with FF2 and FF3b4)?

Thanks.

[Rumen]

Hi Peter Zolja,

This is a browser behavior. To fix it you can use the decodeURIComponent method to decode the URL string and with the substring and lastIndexOf to remove the undesired path of the string path, e.g.

var pathname = argument.realLink.pathname;
if (!document.all)
{
    pathname = decodeURIComponent(pathname);
    pathname = pathname.substring(pathname.lastIndexOf("/")+1);
}

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Peter Zolja]

Thank you.