Hello,
We are not able to open hyperlinks which are in the content area of the RadEditor. We are experiencing this behavior in our code as well as on your demo site. Here is how to replicate the issue on the demo site.
a) Go to the overview page on the RadEditor demo site: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
b) Clear all content in the RadEditor
c) Click on the <html> tab for the RadEditor
d) Enter the following hyperlink into the content area: <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
e) Click on the Preview tab of the RadEditor
f) Click on the hyperlink for d) above. This will not take the browser to the hyperlink which was added into the content area
This behavior is consistent between Google Chrome, Firefox, Edge, Safari and IE
Please advise.
2 Answers, 1 is accepted
RadEditor uses an editable IFRAME for 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. You can follow one of the approaches given in the following articles:
Regards,
Vessy
Telerik
Rank 1
Iron
FWIW, I found that in the JavaScript event handler i also had to add this:
link.setAttribute("onclick", "");
-Mark
If that works, it could be a quirk with how the editor processes raw HTML for links. It's worth checking the Telerik documentation for any known limitations with creating hyperlinks in the HTML view.
Well it doesn't really matter because the RadEditor needs to be able to be loaded with default content which could include hyperlinks. When the RadEditor processes a hyperlink, it adds the following attributes onclick="return false" <-- This is effectively what is disabling the link, and it also adds an attribute with the name re_target, and re_onclick. I couldn't really figure out what those did, but "re" obviously stands for RadEditor. To make links functional in the preview window i used this JS for the OnClientLoad event and it looks like it's fixed the problem (for me).
function OnClientLoad(editor) { var links = editor.get_document().getElementsByTagName("A"); for (var i = 0; i < links.length; i++) { var link = links[i]; link.setAttribute("target", "_blank"); link.removeAttribute("onclick"); link.removeAttribute("re_target"); link.removeAttribute("re_onclick"); } }Hi folks,
The links are not clickable on purpose in the Preview area since otherwise the page referred by the clicked link will open directly in the iframe content area and the written content will be erased. For this reason the content filters of RadEditor automatically applies re_onclick onclick="return false" to all links when switching to Preview mode to disable the click event.
If you want to open a link in Preview mode, just right click over it and use Open Links options from the context menu:
An alternative approach is shown in this forum thread: https://www.telerik.com/forums/have-links-in-preview-mode-open-in-new-window.
Yeah, i get it that you can right-click on the link and choose the open in a new tab option, however i have hundreds of users (many who are not that savy), and that's not really a viable solution for them. They will complain to their admins who will complain to us and it's just a colossal support nightmare.
I get what you are saying about the link clicks in the iframe opening and overwriting whatever is in the iframe. That makes total sense, which is why the option that worked for me was to make sure you set the target="_blank" attribute on all links in the onclientload script. In my situation the editor content is always read-only, and the editor is fixed to only allow preview mode. (the users don't really even realize that the content is being displayed in an editor) So i don't have to be concerned about any changes made to the links by the onclientload script getting persisted back to the database.
-Mark
I agree that your solution is perfect for your scenario! Thank you for sharing it, Mark!
As for the scenarios when one should switch between the modes, check the forum post I provided in my earlier post - it offers different solutions based on custom content filters and on mode changes (add_modeChange) event.