Have links in Preview mode open in new window

[hacker]

Hi all,

I am looking for a way to have links in the Preview mode open in a new window.  I don't want it to change the content that gets submitted, just what is being displayed while in Preview mode.  Right now, if I click on a link in preview mode, it will redirect my editor pane and then I lose all the un-saved content.

I found some old threads from over a year ago about implementing a custom dialog box, etc...   Hopefully there is some other solution now because that is more than I really wanted to get into.   I'd like for something to just work with the 'Preview' button beside the HTML and Design buttons at the bottom of the editor.

Thanks,
Shawn

[Rumen]

Hello Soatley,

Please, try the following code which preserves the links' original target setting as specified by the user, but set target="_blank" when user switches to Preview mode

<script>
function OnClientLoad(editor)
{       
    editor.add_modeChange(function()
    {
        //Convert all links to have target = "_blank" when user is in preview mode. Keep existing setting and restore it when user switches back
        var mode = editor.get_mode();
        var links = editor.get_document().getElementsByTagName("A");
        
        for (var i=0; i < links.length; i++)
        {
            var link = links[i];
            //Keep old setting, set target=blank
            if (mode == Telerik.Web.UI.EditModes.Preview)
            {
                link.setAttribute("original_target",  link.getAttribute("target"));
                link.setAttribute("target",  "_blank");
            }
            else 
            {               
               var target = link.getAttribute("original_target");
               if (target) link.setAttribute("target",  target);
               link.removeAttribute("original_target");
            }
        }                
    });
}
</script>                      
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad" />

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[hacker]

Hi Rumen,

It is almost perfect, thanks for that code.  Is there a way to get the event to fire before the content is rendered?  Here is what I have found.

1) Add a link in Design Mode - don't set a target.
2) Switch to HTML.  Content doesn't change - perfect.
3) Switch to Preview.  Link opens in a new window.  Perfect.
4) Switch back to HTML view - still has target="_blank" when it should not have a target attribute.
5) Switch to Design and then back to HTML and the target is removed. 

From what I can tell, this event (add_ModeChange) is fired after the content is placed into the editor window.  Is there any "add_ModeChanging" type of event that would get fired before setting the display?  I looked through the help, but couldn't seem to find anything.

Also, I've made some changes to your function to allow for some debugging messages.  You may want to try this to see what I am talking about:

 function OnClientLoad(editor) {
            editor.add_modeChange(function() {
                //Convert all links to have target = "_blank" when user is in preview mode. Keep existing setting and restore it when user switches back
                alert("changing modes");
                var mode = editor.get_mode();
                var links = editor.get_document().getElementsByTagName("A");

                for (var i = 0; i < links.length; i++) {
                    var link = links[i];
                    //Keep old setting, set target=blank
                    if (mode == Telerik.Web.UI.EditModes.Preview) {
                        try {
                            alert(link.getAttribute("target"));
                            if (link.getAttribute("target") != null) {
                                alert("set original to: " + link.getAttribute("target"));
                                link.setAttribute("original_target", link.getAttribute("target"));
                            } else { alert("target is null"); }
                            link.setAttribute("target", "_blank");
                        } catch (e) { alert("Preview: " + e); }
                    }
                    else {
                        alert("non-preview");
                        try {
                            var target = link.getAttribute("original_target");
                            alert(link.getAttribute("original_target"));

                            if (link.getAttribute("original_target") != null) {
                                alert("setting target to: " + target);
                                link.setAttribute("target", target);
                            } else {
                                alert("original target is null");
                                link.removeAttribute("target");
                            }
                            link.removeAttribute("original_target");
                        } catch (e) { alert("Not Preview: " + e); }
                    } // end preview check
                } //end for
            });   //end add_modeChange function
        }  //end function

The alert boxes pop up on the screen and indicate what each attribute is.  When I switch from Preview to HTML, the content in the editor still shows the target attribute but the message boxes say that the attributes are null.

Thanks,
Shawn

[Rumen]

Hi Soatley,

My suggestion is to implement a content filter that will strip the target="_blank" attribute when switching to Html mode. You can see how to implement it in this live demo: Custom Content Filters.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[hacker]

Hi Rumen,

Thanks again for the pointer.  I did like you suggested and it works great.  Here is the code that I used to make a custom filter (in case anyone else wants this):
Make sure you add the following into your editor definition:

OnClientLoad="OnClientLoad"

Add the following javascript:

        function OnClientLoad(editor, args) {
            editor.get_filtersManager().add(new ResetTarget());
        }
   ResetTarget = function() {
            ResetTarget.initializeBase(this);
            this.set_isDom(false);
            this.set_enabled(true);
            this.set_name("ResetTarget");
            this.set_description("Reset the target in <a> when switching to HTML view");
        }


        ResetTarget.prototype =
        {
            getHtmlContent: function(content) {
                var newContent = content;
                try {

                    var links = content.match(/\<a\b[^\>]*?\>/gi);
                    if (links.length > 0) {
                        /* have some links, go through them */
                        for (var i = 0; i < links.length; i++) {
                            /* get the original_target */
                            var original = links[i].match(/original\_target=\"([^\'\"]*?)[\'\"]/);

                            if (original.length == 2) {
                                /* have a match for where the target is going */

                                if (original[1].length > 0) {
                                    /* we have an original target.... put together a new link */
                                    var newLink = links[i].replace(/\btarget=\"[^\"]*?\"/, "target=\"" + original[1] + "\"");
                                    newLink = newLink.replace(" " + original[0], "");
                                    newContent = newContent.replace(links[i], newLink);
                                }
                            }
                        } /* end for */
                    } /* end if for links.length>0 */
                } catch (e) { }
                return newContent;
            }, /* end getHtmlContent */

            getDesignContent: function(content) {
                /* don't touch the design content */
                return content;
            } /* end getDesignContent */

        } /* end prototype */
        ResetTarget.registerClass('ResetTarget', Telerik.Web.UI.Editor.Filter);

Shawn

[Rumen]

Hi Shawn,

Thank you very much for sharing your solution with the community. We do appreciate your work and we updated your Telerik points.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.