How to chech the cursion position in rad editor

2 posts, 0 answers
  1. Uma
    Uma avatar
    18 posts
    Member since:
    Jan 2012

    Posted 16 Feb 2012 Link to this post

    Hi, i am using rad editor in wysiwyg mode.

    I need to insert some text to cursor position.

    before paste some text, i need to check some condition like, the given cursor position is center/left/right of the particular elememt.

    My code like
    var selectedtag = editor.getSelectedElement();
                          var range = editor.getSelection().getRange();
                          var selection = editor.getSelection();
                          if (selectedtag.tagName != "LI" && selectedtag.tagName != "P") {
                              var sel = editor.getSelection().getText();
                              var text = selectedtag.innerHTML;
                              //range.pasteHTML('<p>' + sel + '</p>');
                               selectedtag.innerHTML = '<p>' + text;
                          else if (selectedtag.tagName == "LI") {
                              var sel = editor.getSelection().getText();
                              if (sel == "") {
                              else {
                                  range.pasteHTML('</li><li>' + sel + '</li>');
                          else if (selectedtag.tagName == "P") {
                              var sel = editor.getSelection().getText();
                              if (sel == "") {
                              else {
                                  range.pasteHTML('</p><p>' + sel + '</p>');
                          else {
                              var sel = editor.getSelection().getText();
                              if (sel == "") {
                              else {
                                  range.pasteHTML('</p><p>' + sel + '</p><p>');
    i got the range.
    But , how to check if the selected text has any text before and after.

    I need to implement some text based on the condition like,

    Te  Text to the left is empty (ie selection is at the start of the element): <p> selected text text to the right</p>

    3)  Text to the right is empty (ie selection is at the end of the element): <p>Text to the left selected text </p>

    i need the output like,

    <p> selected text</p><p>text to the right</p>

    How to check if the selected text /range contains any text before and after the selected text.

    This is urgent requirement.
    Thanks ,

  2. Rumen
    Rumen avatar
    14459 posts

    Posted 20 Feb 2012 Link to this post


    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();
    dup.setEndPoint("EndToStart", range);
    startpos = dup.text.length;
    else // Non-IE, W3C Range object
    range = editor.getSelection().getRange();
    text =;
    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:

    You can create a range in RadEditor using 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

    to select some element.

    Kind regards,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top