This is a migrated thread and some comments may be shown as answers.
RadEditor Delete and Backspace Key Issue
3 Answers 80 Views
This is a migrated thread and some comments may be shown as answers.
Manish
Top achievements
Rank 1
Manish asked on 20 Apr 2012, 06:07 AM
Hi
I have creating some changes with telerik Editor like I am using each HTML tag with a speperate element and Each Element is showing in a different look using Css. I have attached some keydown and onclick events with Editor to achieve good functionality.
But I am having problem when I am currently working in a Tag than, at starting position when I press backspace key than content is Mixed with previous Element or Block. and Same when  at ending position when I press Delete key than content is Mixed with Next Element or Block.
So Please tell me how can I track Cursor position in current block.
I want to know where is my cursor on  onkeydown, onkeypress, onkeyup events.


Please attached Image to see my view of Editor.
Waiting for you Reply.


Thanks in Advance.
Best regards,
Manish
Programmer

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 23 Apr 2012, 11:05 AM
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
var doc = editor.get_document();
var range, text, startpos;
if (doc.selection) // IE, TextRange object
{
range = editor.getSelectedElement().createTextRange();
text = range.text;
// Do some jiggery pokery with ranges to get the real start position
var dup = range.duplicate();
range.moveToBookmark(doc.selection.createRange().getBookmark());
dup.setEndPoint("EndToStart", range);
startpos = dup.text.length;
}
else // Non-IE, W3C Range object
{
range = editor.getSelection().getRange();
text = range.startContainer.data;
startpos = range.startOffset;
}


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.
0
Balaji
Top achievements
Rank 1
answered on 09 May 2012, 07:43 AM
Hi,

  I have tried the code and it is working fine at first shot. If i delete the text in editor control and add some new text and the below piece of code throwing error, object doesnt support : in javascript.

range = editor.getSelectedElement().createTextRange();

What is the problem if i cleared and type a new text again?

0
Rumen
Telerik team
answered on 11 May 2012, 02:33 PM
Hello,

Can you please provide a fully working example, sample content and steps or a video on how to reproduce the issue?

You can also try to implement your solution with a standard textbox and send us the code. We will help you to integrate it in RadEditor.

Greetings,
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.
Asked by
Manish
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Balaji
Top achievements
Rank 1
Share this question
or