[Solved] editor API replace selection

[Vincent Girard]

Hello,

I have a CustomLinkManager to handle the link creation in my editor but when I select a created link to edit it, it create an other <a> tag witch contain the one selected. My problem is that I need to replace the current selection, is there something like editor.ReplaceSelection(html) ?

 Thanks for the help!

Vincent

My code looks like this : 

Telerik.Web.UI.Editor.CommandList["CustomLinkManager"] = function(commandName, editor, args) {
                    var elem = editor.getSelectedElement(); //returns the selected element.

                    if (elem.tagName == "A") {
                        editor.selectElement(elem);
                        argument = elem;
                    }
                    else {
                        var content = editor.getSelectionHtml();
                        var link = editor.get_document().createElement("A");
                        link.innerHTML = content;
                        argument = link;
                    }

                    var myCallbackFunction = function(sender, args) {
                        var html = String.format("<a href=\"{0}\" target=\"{1}\" class=\"{2}\" title=\"{3}\">{4}</a>", args.url, args.target, args.className, args.title.replace("'", "\'"), args.name);
                       editor.pasteHtml(html)

                    }

                    editor.showExternalDialog('<%= Page.ResolveUrl("~/aspx/cms/CustomLinkManager.aspx") %>', argument, 600, 600, myCallbackFunction, null, 'Insérer un lien', true, Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, false, true);
                };

[Rumen]

Hi Vincent,

You should not experience this problem. Are you able to reproduce it with the custom link manager in this live demo: http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/defaultcs.aspx ?
Your code is taken from the same example.

Sincerely,
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.

[Vincent Girard]

Hi Rumen,

Thanks for the reply!

I did reproduce the same bug with the live demo. I added a link, selected it and changed the content and it gave me this result : 

<a href="http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/www.spektrum.com" name="test 3"><a href="http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/www.spektrum.com">test 3</a> </a>

As you can see I have 2 <a> tags. I only get this behavior in google Chrome(version 3.0.195.27) in FF works fine but in IE, if I select all the link element and click on the custom link button I get a js error.

Also wonderign, I have a CustomImageManager,it works like the CustomLinkManager, I have a little problem, when I add my image, I put my image in a <div> (for adding a shadow) but then I often add my image in a <p> but I would like to get the parent from my selection so the <div><img> would be in front of the <p>, can you help me with this?

My code :

Telerik.Web.UI.Editor.CommandList["ImageManager"] = function(commandName, editor, args) {
                        argument = null;
                        var myCallbackFunction = function(sender, args) {
                            var html = String.format("<div class=\"photo-featured figure-a\"><div class=\"div\"><img src=\"{0}\" alt=\"{1}\" /></div></div>", args.src, args.alt);
                            var myDomain = document.location.hostname;
                            html = html.replace(myDomain,'').replace('http://','');

                            editor.pasteHtml(html);
                        }

                        editor.showExternalDialog('<%= Page.ResolveUrl("~/aspx/cms/CustomImageManager.aspx") %>', argument, 750, 600, myCallbackFunction, null, 'Insérer une image', true, Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, false, true);
                    };

Thanks again!

[Rumen]

Hi Vincent,

This is a problem of the Safari / Google Chrome implementation. To fix the problem just delete the selected content with editor.get_document().execCommand("Delete", null, false); and after that paste the new one at cursor position:

<telerik:RadEditor id="RadEditor1" runat="server">
    <Content><p>This is a <a href="http://www.google.com/">link</a> to test with</p> </Content>
</telerik:RadEditor>

<input type="button" value="Paste Content" onclick="InsertNewLink();return false;" />
<script type="text/javascript">
function InsertNewLink()
{
  var editor = $find("<%=RadEditor1.ClientID%>");
  var elem = editor.getSelectedElement();
  editor.selectElement(elem);
  editor.get_document().execCommand("Delete", null, false);
  editor.pasteHtml("<a href='http://www.yahoo.com'>new link</a>");
}
</script>

I was unable to reproduce the IE error. Could you please provide more information on how to reproduce the problem, send the error message and debug information and specify the IE version?

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.

[Debbie Roberts]

I too am having problems with this in IE and can reproduce it using your demo at http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/defaultcs.aspx

These are the steps that you need to take. I am using IE7 but the same problem occurs in IE8.

Step1
Change the <UL/> markup in your demo, via the HTML tab, to the following:

<ul>
    <li><a href="#">Single-file, drag-and-drop deployment</a></li>
    <li><a href="#">Built on top of ASP.NET AJAX</a></li>
    <li><a href="#">Unmatched loading speed with new semantic rendering </a></li>
    <li><a href="#">Full keyboard accessibility</a></li>
    <li><a href="#">Flexible Skinning mechanism</a></li>
    <li><a href="#">Simplified and intuitive toolbar configuration</a></li>
    <li><a href="#">Out-of-the-box XHTML-enabled output</a></li>
</ul>

Step 2
Switch to Design Tab.

Step 3
Place cursor on first link by clicking once on the text.

Step 4
Launch the dialog.

Step 5
OK the dialog, without changing anything.

Step 6
Switch to HTML Tab.

QED
The markup now includes an extra anchor tag:

<li><a href="#">Single-file, drag-and-drop deployment</a><a href="#"> </a></li>

Extra Information

1. When the argument object is being used to pass extra parameters to or from the dialog, all of these parameters appear as attributes on the superfluous anchor that gets created, e.g. if I pass a parameter called sessionID to the dialog by setting argument.sessionID='12345', then the superfluous anchor will be: <a href="#" sessionID="12345"> </a>.
2. Another strange effect can be seen by repeating above steps but in step 3 manually highlighting the link by clicking at the left of the link and dragging to the right (end of the line), then continue from step 4. in this case the markup changes to:

<a href="http://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/target=''" originalPath="target=''" originalAttribute="href">
    <li>Single-file, drag-and-drop deployment</li>
    </a>

1. I have tried adding editor.get_document().execCommand("Delete", null, false);  before the pasteHTML in my own code and this does not solve the problem.
2. I have also tried putting the above deletion twice and this works in some cases but in others it causes further corruption of the markup.

Is there any way to prevent the insertion of this superfluous anchor?

[Dobromir]

Hi Debbie,

Thank you for bringing this problem to our attention. I logged it into our PITS system for further investigation and we will try to fix it for one of our upcoming releases. You can follow the PITS Issue by its ID: 1332 or using this link.

As a small token of gratitude I have updated your Telerik points.

Sincerely yours,
Dobromir
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.