Hi,
You can try the solution provided in the following forum thread:
How to checк the cursion position in rad editor.
Instead of the document object of the browser you should obtain the document object of the RadEditor, e.g. var newRange =
editor.get_document().createRange();
If you want to obtain the currently selected element you can use the
editor.getSelectedElement() method.
If needed you can use the
var
elem = editor.getSelectedElement(); //returns the selected element
editor.selectElement(
elem);
to select some element.
If you would like you can implement your own selection mechanism based on the text Ranges API provided by the browser, e.g.
Copy Code
RadEditorSelection utilizes W3C
Range and Microsoft TextRange objects to provide cross-browser support, however, for more advanced manipulations you will need to use the standard objects. More detailed information regarding W3C Range and Microsoft TextRange is available in the following 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
http://www.quirksmode.org/js/findpos.html
If the ContentAreaMode is set to DIV: try this article:
Finding cursor position in a contenteditable div.
Here it is:
Copy Code
<telerik:RadEditor ID="RadEditor1" ContentAreaMode="Div" runat="server" OnClientLoad="OnClientLoad">
<Content>Lots of text for testing</Content>
</telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor) {
editor.attachEventHandler("onkeydown", function (e) {
getCursorPos();
});
editor.attachEventHandler("click", function (e) {
getCursorPos();
});
}
</script>
<script type="text/javascript">
function getCursorPos() {
var cursorPos;
if (window.getSelection) {
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0);
cursorPos = findNode(selObj.anchorNode.parentNode.childNodes, selObj.anchorNode) + selObj.anchorOffset;
/* FIXME the following works wrong in Opera when the document is longer than 32767 chars */
alert(cursorPos);
}
else if (document.selection) {
var range = document.selection.createRange();
var bookmark = range.getBookmark();
/* FIXME the following works wrong when the document is longer than 65535 chars */
cursorPos = bookmark.charCodeAt(2) - 11; /* Undocumented function [3] */
alert(cursorPos);
}
}
function findNode(list, node) {
for (var i = 0; i < list.length; i++) {
if (list[i] == node) {
return i;
}
}
return -1;
}
</script>
The following articles could be helpful as well:
http://stackoverflow.com/questions/2871081/jquery-setting-cursor-position-in-contenteditable-div
https://forrst.com/posts/Tracking_the_caret_position_in_a_contenteditable-P4l
Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their
blog feed now.