How do I make hyperlinks active in RadEditor

[Chris Dalessandri]

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.

[Rumen]

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.

[Chris Dalessandri]

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

[Rumen]

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.

[Fit2Page]

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

[Rumen]

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.

[Fit2Page]

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

[Rumen]

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.