How do I make hyperlinks active in RadEditor

8 posts, 0 answers
  1. Chris Dalessandri
    Chris Dalessandri avatar
    44 posts
    Member since:
    Aug 2005

    Posted 01 Oct 2008 Link to this post

    By default it looks like nothing happens when you are in edit mode, and you click a hyperlink in RadEditor.  Is there a way to enable hyperlinks in edit mode?

    Here is more about my scenario.  We have an Editor on the page where users can type a paragragh, we also insert hyperlinks into their text that they are not allowed to modify.  The hyperlink calls a javascript method that opens a popup with additional information.  I would like the hyperlink to execute the method when the user clicks it in edit mode, but currently it looks like nothing is happening and the mouse cursor doesn't even change to hand.
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 01 Oct 2008 Link to this post

    Hi Chris,

    I think that the following articles could be helpful for your scenario:

    Opening Link In A New Window When Clicked
    and
    Opening Link In A New Window On Double Click.


    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris Dalessandri
    Chris Dalessandri avatar
    44 posts
    Member since:
    Aug 2005

    Posted 01 Oct 2008 Link to this post

    thanks, the first example says "This example opens the editor in Preview EditorMode so that clicking the links will have the expected behavior."

    and I am trying to do it in Design mode and that is what the problem is.  The second example seems to be an okay work around to the problem but I was hoping for a way to just enable the hyperlinks to work the same in Design mode as they do in Preview mode.

    Is there a way to enable the hyperlinks in Design mode so that they work the same way as they do in Preview mode?

    thanks

  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 02 Oct 2008 Link to this post

    Hi Chris,

    The editor uses an editable IFRAME in its content area and the links are not clickable by default. That is why you need to attach to the onclick event of the IFRAME and programmatically open the links in a new window when the event is fired. Here is an example how to achieve this in Design mode:

     <script type="text/javascript">
       function OnClientLoad(editor)
       {
           editor.attachEventHandler ("onclick", function (e)
           {
                var sel = editor.getSelectedElement(); ; //get the currently selected element
                var href = null;
                if (sel.tagName == "A")
                {
                    href = sel.href; //get the href value of the selected link
                    window.open(href, null, "height=500,width=500,status=no,toolbar=no,menubar=no,location=no");
                    return false;
                }
           });
        }
    </script>
    <telerik:RadEditor
       ID="RadEditor1"
       runat="server"
       Skin="Default"
       OnClientLoad="OnClientLoad">
       <Content>
          Sample Content
          <a href="http://www.telerik.com">www.telerik.com</a>
          test
          <a href="http://www.yahoo.com">www.yahoo.com</a>
          test
          <a href="http://www.test.com/some.pdf">some.pdf</a>
       </Content>
    </telerik:RadEditor>

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 20 Jan 2010 Link to this post

    Hi Rumen,

    You said "The editor uses an editable IFRAME in its content area and the links are not clickable by default. "

    Well, links can be clicked in Design Mode in the following situation:

    in HTML I have:

    <a href="default.aspx?id=62" class="StapKopen">Kopen</a>

    and in coupled CSS:

    a.StapKopen {width:198px;background-image:url(../../images/stap_kopen.png) }

    Now the image becomes a clickable link. Is there a waw to also block these clicks?

    BR,

    Marc








  7. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 20 Jan 2010 Link to this post

    Hi Marc,

    I tried to reproduce the reported behavior in Design mode, but without any success. For your convenience I have attached a video demonstrating my test. What am I missing?

    Please, note that the width:198px css property in the a.StapKopen class enables the hasLayout property of the link tag. This means that a border will appear when you click on such element and to edit it you should doble click on it. This is a browser behavior of IE not controlled by RadEditor.

    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 20 Jan 2010 Link to this post

    Sorry I didn't send you the full scenario Rumen

    Try pasting

    <div contenteditable="false">
    <div class="Left" id="StapKopen"><a href="default.aspx?id=62" class="StapKopen">Kopen</a></div>
    </div>

    As content in the Editor. Now you will see that the the link is clickable. The link is NOT clickable when setting contenteditable="true"

    I hope this helps
    Marc



  9. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 21 Jan 2010 Link to this post

    Hi,

    This a IE related behavior. The links are clickable in the non editable container elements such as the DIV element in Internet Explorer. This behavior does not exist in Firefox.
    To disable the link clicking in IE you should attach to the click and dblclick events and stop their execution, e.g.

    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
        <Content>
        <div contenteditable="false" onclick="return false;">
            <a href="default.aspx?id=62" onclick="null">Kopen</a>
    </div>
                                                                                             
        </Content>
    </telerik:RadEditor>
     
    <script type="text/javascript">
     
     
    function OnClientLoad(editor, args)
    {
       var element = document.all ? editor.get_document().body : editor.get_document();
       $telerik.addExternalHandler(element, "click", function(e)
       {
           var elem = editor.getSelectedElement();
           if (elem.tagName == "A")
           {
               $telerik.cancelRawEvent(e); 
               return false
           }
            
       });
        
       $telerik.addExternalHandler(element, "dblclick", function(e)
       {
           var elem = editor.getSelectedElement();
           if (elem.tagName == "A")
           {
               setTimeout(function()
               {
                 $telerik.cancelRawEvent(e); 
                 return false
                }, 10);
           }
            
       });
    }
     
    </script>

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017