[Solved] Custom Dialog Insert Duplicating Markup

[Norman Peter]

I’m implementing a Custom Insert Link Dialog, but have run into a problem.

When I insert a link from my custom dialog it insert the new link and the original link (without any contents with argument parameters used)

IE 8
Original editor source:

<p><a href="/link.htm">link text</a></p>

Source after Insert:

<p><a href="/link.htm">link text</a><a href="/link.htm" SKS="bd274b09-7e8d-4802-8edb-f739b2fd00c1" SiteID="1294" PeopleID="12459" newHref="/link.htm"></a></p>

All element properties are properties of the dialog argument object.

Firefox – OK

Chrome and Safari 4
Original editor source:

<p><a href="/link.htm">link text</a></p>

Source after Insert :

<p><a href="/121212.htm"><a href="/121212.htm">test of v8 style link</a></a></p>

Steps I Take
Highlight link
Click custom dialog button on toolbar and insert link
Change to html view – and see problem

Followed the example on:
http://www.telerik.com/help/aspnet-ajax/addcustomdialogs.html 

CODE: 

Telerik.Web.UI.Editor.CommandList["InsertSpecialLink"] = function(commandName, editor, args) {

                var selectedElement = editor.getSelectedElement();
                var popUpUrl = "/AdminV9/Link/InsertLink.aspx?sks=" + "<%=SKS%>";

                var argument = null;

                if (selectedElement.tagName == "A") {
                    editor.selectElement(selectedElement);

                    // Set argument as link this will be passed into popup
                    argument = selectedElement;
                }
                else {
                    var content = editor.getSelectionHtml();

                    if (content.indexOf('<A') > -1 || content.indexOf('</A>') > -1) {
                        alert('Some of the text you have selected already contains a hyperlink. Click inside that hyperlink first to remove it or to edit it. ')
                        return false;
                    }

                    // Create a new link element
                    var link = editor.get_document().createElement("A");
                    link.innerHTML = content;

                    // Set argument as link this will be passed into popup
                    argument = link;
                }

                // Modify argument so picker can call web services
                argument.SKS = "<%=SKS%>";
                argument.SiteID = "<%=SiteID%>";
                argument.PeopleID = "<%=PeopleID%>";


                var InsertInternalLinkOK = function(sender, args) {
                    // Google makes the url absolute so use "newHref" property rather that "href"
                    editor.pasteHtml(String.format("<a href={0} target='{1}' class='{2}'>{3}</a>", args.newHref, args.target, args.className, args.innerHTML))
                }

                editor.showExternalDialog(
                    popUpUrl,
                    argument,
                    600,
                    500,
                    InsertInternalLinkOK,
                    null,
                    'Insert Link',
                    true,
                    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                    false,
                    true);
            };

Thanks, 

[Norman Peter]

Using version v2.0.50727

[Rumen]

Hi Norman,

Please, see the following forum thread which provides guidance how to solve this Chrom / Safari problem: editor API replace selection.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Norman Peter]

Hi Rumen,

Thanks for the fix, works perfect for Safari/Chrome.

Needed to run execCommand twice in IE:

                var InsertInternalLinkOK = function(sender, args) {
                    // Google makes the url absolute so use "newHref" property rather that "href"

                    // Create the markup for the new tag
                    var tagHtml = String.format("<a href={0} target='{1}' class='{2}'>{3}</a>", args.newHref, args.target, args.className, args.innerHTML)

                    // Remove highlighed text - elements
                    editor.get_document().execCommand("Delete", null, false);

                    // Remove extra link
                    editor.get_document().execCommand("Delete", null, false);

                    // Paste new link
                    editor.pasteHtml(tagHtml)
                }

Thanks,

Norman