This is a migrated thread and some comments may be shown as answers.

How to chech the cursion position in rad editor

1 Answer 180 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Uma
Top achievements
Rank 1
Uma asked on 16 Feb 2012, 09:51 AM
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 == "") {
                              range.pasteHTML('</li><li>...</li>');
                          }
                          else {
                              range.pasteHTML('</li><li>' + sel + '</li>');
                          }
                      }
                      else if (selectedtag.tagName == "P") {
                          var sel = editor.getSelection().getText();
                          if (sel == "") {
                              range.pasteHTML('</p><p>');
                          }
                          else {
                              range.pasteHTML('</p><p>' + sel + '</p>');
                          }
                      }
                      else {
                          var sel = editor.getSelection().getText();
                          if (sel == "") {
                              range.pasteHTML('</p><p>');
                          }
                          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 ,
Uma



1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Feb 2012, 04:33 PM
Hello,

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

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
editor.selectElement(elem);

to select some element.

Kind regards,
Rumen
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
Editor
Asked by
Uma
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or