RadEditor Delete and Backspace Key Issue

4 posts, 0 answers
  1. Manish
    Manish avatar
    1 posts
    Member since:
    Jul 2012

    Posted 20 Apr 2012 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    14422 posts

    Posted 23 Apr 2012 Link to this post

    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.
  3. Balaji
    Balaji avatar
    15 posts
    Member since:
    May 2012

    Posted 09 May 2012 Link to this post

    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?

  4. Rumen
    Admin
    Rumen avatar
    14422 posts

    Posted 11 May 2012 Link to this post

    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.
Back to Top