RadEditor Delete and Backspace Key Issue

[Manish]

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

[Rumen]

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

[Balaji]

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?

[Rumen]

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