This is a migrated thread and some comments may be shown as answers.

How to paste / inseret the text at cursor position in RadEditor ???

23 Answers 837 Views

Editor

This is a migrated thread and some comments may be shown as answers.

23 Answers, 1 is accepted

answered on 05 May 2010, 09:51 AM

Hi Satish,

The selection and cursor position is a client-side object and it cannot be manipulated from the server. You can set the cursor position only on the client. You can paste at cursor position using the pasteHtml client-side method.

If you would like to manipulate the cursor / caret position in the editor's content area, then my recommendation is to implement your scenario with an editable IFRAME (the content area of RadEditor is an editable IFRAME) or editable DIV, using the Range object. Information regarding TextRange is available in these articles:
http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
http://www.quirksmode.org/dom/range_intro.html
http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx

If you succeed and implement it, send us the code and we will replace the IFRAME with RadEditor and integrate the code to work with the editor control.

All the best,
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.

answered on 26 Jul 2010, 11:31 AM

Hi Ron,

I tested the code of the example that you are referring to and it is working as expected. Could you please provide more detailed information regarding the specific scenario?

What version of RadControls and .NET Framework are used in the application?
Under which browser and its version the problem occurs?
Could you please open a support ticket and provide a sample runnable project that demonstrates the issue so we can investigate it further?

I have prepared a video that demonstrates my test.

Kind regards,
Dobromir
the Telerik team

answered on 10 Nov 2010, 02:59 PM

default-aspx.zip

Hi Viktor,

This problem can occur if you click out of the editor, thus losing its current selection, before pasting content in it using pasteHtml() method. To avoid this issue I suggest set html attribute unselectable="on" to elements that might be clicked and causes the selection to be lost. Please find attached a sample page demonstrating this approach.

Sincerely yours,
Dobromir
the Telerik team

answered on 11 Nov 2010, 03:25 PM

Hello Dobromir,

Please look at the sample that illustrates how to reproduce the bug. Use it in IE 8. In my case, yellow area in the sample is a tab that I need to click for accessing to specific UI.

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<style type="text/css">

html, body, form

{

height:100%;

}

</style>

</head>

<body class="BODY">

<form id="Form1" method="post" runat="server">

<div UNSELECTABLE="on" style="height:100%;">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadWindowManager ID="RadWindowManager2" runat="server" />

<telerik:RadEditor ID="RadEditor1" runat="server" />

<asp:Button ID="Button1" runat="server" Text="Paste Text" OnClientClick="openDialog(); return false;" />

<script type="text/javascript">

function openDialog()

{

var editor = $find("<%=RadEditor1.ClientID %>");

var oWnd = radopen("Dialog.aspx", 400, 400, true);

oWnd.argument = { RadEditor: editor };

}

</script>

</div>

</form>

</body>

</html>

Dialog.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dialog.aspx.cs" Inherits="Silvon_Dialog" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadWindowManager ID="RadWindowManager2" runat="server" />

<div style="background-color: #FFF8C4; border: solid 1px #FF715B; padding: 10px; width: 150px; margin-bottom: 10px;">

Click here before paste

</div>

<select id="listBox1" multiple="multiple">

<option value="1">1</option>

<option value="2">2</option>

<option value="3" selected="selected">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

<textarea id="templateTextarea" rows="5" cols="20">%Value_{%}%</textarea>

<asp:Button ID="Button1" runat="server" Text="Paste Text" OnClientClick="pasteContent(); return false;" />

</div>

<script type="text/javascript">

function GetRadWindow1() {

if (window.radWindow) {

return window.radWindow;

} else if ((window.frameElement) && (window.frameElement.radWindow)) {

return window.frameElement.radWindow;

} else {

var iframes = document.getElementsByTagName("iframe");

for (var i = 0; i < iframes.length; i++) {

if (iframes[i].radWindow) return iframes[i].radWindow;

}

function pasteContent() {

var oWnd = GetRadWindow1();

var editor = oWnd.argument.RadEditor;

var listBox = document.getElementById("listBox1");

var template = document.getElementById("templateTextarea").value;

editor.pasteHtml(template.replace("{%}", listBox.value));

}

</script>

</form>

</body>

</html>

About unselectable="on", I'm not sure that I could apply it on the project, because it has a very complex HTML structure and a lot of JavaScript functionality.

Thank you.
- Viktor Burdeinyi

answered on 12 Nov 2010, 02:24 PM

preservecursorposition.zip

Hi Viktor,

For this scenario you can use the RadEditor's selection methods getRange() and selectRange() to preserve the cursor position when opening the dialog, e.g.:
Default.aspx

var cursorPosition = null;

function openDialog()

{

var editor = $find("<%=RadEditor1.ClientID %>");

cursorPosition = editor.getSelection().getRange();//store cursor position

var oWnd = radopen("Dialog.aspx", 400, 400, true);

oWnd.argument = { RadEditor: editor };

}

dialog.aspx

function pasteContent()

{

var oWnd = GetRadWindow1();

var editor = oWnd.argument.RadEditor;

var listBox = document.getElementById("listBox1");

var template = document.getElementById("templateTextarea").value;

if (oWnd.BrowserWindow.cursorPosition)

editor.getSelection().selectRange(oWnd.BrowserWindow.cursorPosition);//restore cursor position

editor.pasteHtml(template.replace("{%}", listBox.value));

}

For your convenience I have attached sample page implementing the above approach.

All the best,
Dobromir
the Telerik team

answered on 28 Mar 2014, 09:50 AM

Hi Nick,

The mentioned problem is about loosing the range of the selection when using custom dialogs. This is a matter of IE and cannot be resolved. Although this can be resolved by preserving and restoring the range as shown in this help article.

The matter that you are reporting is not reproducible on my end. The drop-down tools are working as expected and the selection is correctly preserved. Please examine this screencast and let me know if I am missing something important to reproduce the issue.

Regards,
Ianko
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

answered on 30 Mar 2014, 09:25 PM

As I said, the issue occurs when selecting images, not text. When text is selected the selection is preserved.

However as I described, when an image is selected, the selection is not lost when using buttons such as bold or left-align, only when a (standard or custom) dropdown is opened, such as font-size.

So you can reproduce the issue by selecting an image, opening and closing the font-size dropdown (but not changing font-size), then try to align the image, which will not work.

In fact using the demo I had to jump through hoops even to get the alignment to work. I had to select the image, turn on italics, select the image again, then right-align. It is then possible to left-right align as many times as you like, but once you open a dropdown it is not possible to align any more.

Because the selection is lost before the dropdown is used, it is not possible to preserve the range as in the linked article.

Nick

answered on 01 Apr 2014, 10:21 AM

Hello Nick,

I tried reproducing the described behavior with this online example, but to no avail. Please examine this screencast and let me know if I am missing something important that could lead to the problematic behavior.

It would be very helpful if you could open a proper support ticket with more details about the encountered problem along with a sample project that demonstrates the implemented custom dialog, so that we could investigate this issue and suggest a proper resolutions.

Regards,
Ianko
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

answered on 01 Apr 2014, 09:57 PM

Hi Lanko,

I have been using the same online example. In your demo you start by deleting everything except the image, which I had not tried - it doesn't seem like a very realistic example. But yes, when there is nothing in the editor but the image, it appears to work correctly.

To see the behaviour I described in my previous post, just leave the demo content as it is.

Select the image (click on it)
Try to right align (the image is not aligned, but the text above is)
Select the image again
Turn on italics (does nothing but helps get hold of the image)
Select the image again
Right align (now works)
Left align (also works)
Open a dropdown, such as the style dropdown but DO NOT select a style
Right align (does not work, as the selection has been lost)
Select the image again
Open a dropdown, such as the style dropdown, and try to apply a style
Look at the html - the style has NOT been applied, because the selection was lost when the dropdown opened

So as I said, this is standard behaviour, and I don't see any value in creating a sample project - if the selection is lost before a dropdown value can be chosen, there is no point in debugging beyond that.

But if you can come up with a clever way of capturing the selection _before_ the dropdown is opened, that would be very useful. Even more useful if it was built into the editor...

answered on 03 Apr 2014, 09:58 AM

Hi Nick,

The alignment issue with this content is due to the css float attribute. Removing these styles will resolve the problem and let you align the image as expected.

The problem with the selection, you are correct, following your steps I was able to reproduce the issue.

I will log this into our database for fixing. Due to the complexity of the browser 's selection matter I am unable to estimate when exactly is going to be resolved.

As a token of gratitude for this report, please accept a small amount of Telerik points.

Regards,
Ianko
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.