Custom Links - Best Practices

12 posts, 2 answers
  1. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 07 Feb 2008 Link to this post

    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. 

  2. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 08 Feb 2008 Link to this post

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

  3. Rumen
    Admin
    Rumen avatar
    12596 posts
    Member since:
    Sep 2012

    Posted 11 Feb 2008 Link to this post

    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

  4. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 20 Feb 2008 Link to this post

    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.

  5. Answer
    Rumen
    Admin
    Rumen avatar
    12596 posts
    Member since:
    Sep 2012

    Posted 21 Feb 2008 Link to this post

    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

  6. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 21 Feb 2008 Link to this post

    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!

  7. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 21 Feb 2008 Link to this post

    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("<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("<href=" + href + " target=" + target + ">" + name + "</a>");  
     
    var myFunction = function(commandName, editor, args) 
       var myCallbackFunction = function(sender, args) 
       {    
           editor.pasteHtml(String.format("<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.


  8. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 22 Feb 2008 Link to this post

    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.

  9. Rumen
    Admin
    Rumen avatar
    12596 posts
    Member since:
    Sep 2012

    Posted 22 Feb 2008 Link to this post

    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

  10. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 12 Mar 2008 Link to this post

    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.


  11. Answer
    Rumen
    Admin
    Rumen avatar
    12596 posts
    Member since:
    Sep 2012

    Posted 14 Mar 2008 Link to this post

    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

  12. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 14 Mar 2008 Link to this post

    Thank you.

Back to Top