Having issue in Chrome with selectElement and pasteHtml functions

[Addams]

I'm having an issue in Chrome/Safari with trying to use the selectElement and pasteHtml functions.  If I click within a link in some text and then click my custom button, the new link gets inserted within the existing link rather than replacing it.  In Firefox and IE the link actually gets replaced with the new link which is the desired result.

This scenario is similar to having a custom link manager when a user wants to update a link, they click within the link, click a button, and then expect the link to be replaced.

I'm using Chrome 1.0.154.53 and Safari 3.2.2.  The editor version I'm using is the ASP.NET_AJAX_2009_1_402_dev_hotfix.

Before button clicked:

<p>This is a <a href="http://www.google.com/">link</a> to test with</p>

After button clicked:

<p>This is a <a href="http://www.google.com/"><a href="http://www.yahoo.com">new link</a></a> to test with</p>

Below is the javascript for my custom button:

<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.pasteHtml("<a href='http://www.yahoo.com'>new link</a>");

}

</script>

[Rumen]

Hi Addams,

This is a problem of the Safari / Google Chrome implementation. To fix the problem just delete the selected content with editor.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.Document.execCommand("Delete", null, false);
  editor.pasteHtml("<a href='http://www.yahoo.com'>new link</a>");
}
</script>

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

[Addams]

editor.Document did not work.  I had to use the get_document() function instead.

editor.get_document()

[Rumen]

Hi Addams,

Please, excuse me for my mistake!

The editor.Document object is giving a reference to the document element of RadEditor Classic.
The correct code for RadEditor for ASP.NET AJAX is editor.get_document().execCommand("Delete", null, false); ,e.g.

<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>

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.