0

How can I select text and get that selected text using Rangy? For example, if I want to build a text editor like the one on Stack Overflow, where if I select a piece of text and click the B button, that text is replaced by two asterisks preceding and following the text.

I know that the underlying Javascript must capture the selected text's offset, prepend and append that text by asterisks, and output the new text replacing the previous selected text. How do I accomplish this? The native DOM 3 setSelection methods provide some functionality, but these are not highly cross-browser-compatible, whereas Rangy is cross-browser. Unfortunately Rangy's documentation is quite poor.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
SexyBeast
  • 7,913
  • 28
  • 108
  • 196
  • Ok ok, I did some relentless Googling and found out that I don't need to use rangy. The main problem is being created by IE 6-8, which doesn't support setSelection functions and rely on createTextRange. One of its methods is moveEnd. How to use it? The article at http://www.webreference.com/programming/javascript/ncz/index.html says that to get the first 3 characters of a textbox, I must have oRange.moveEnd("character", 3 - oTextbox.value.length);. Please explain this. – SexyBeast Jun 25 '12 at 20:54
  • I would suggest editing your question (and it's title) to include the additional information. That way users won't need to read the comments to see your actual question. – Ricardo Altamirano Jun 25 '12 at 21:07
  • This is not strictly relevant to your question, but if you have specific issues with Rangy's documentation then I'd be really pleased to hear them. – Tim Down Jun 25 '12 at 23:44
  • Your question is confusing: are you talking about using a ` – Tim Down Jun 25 '12 at 23:46
  • I am talking about a normal textarea element. – SexyBeast Jun 26 '12 at 03:32
  • The documentation hardly provides a constructive example, all of them are vague, not one of them teaches like "So here is a div. It contains the text 'A quick brown fox jumps', and if you do this, this will happen"...All it contains is a list of all its functions and what they do. So I have decided not to use it. Please somebody explain the use of moveend! – SexyBeast Jun 26 '12 at 03:34
  • Ok, another update, I now have a fair idea about moveEnd. However does IE 6-8 have a method to get the offset of the selected text? For example, if I select a word in the textarea, press the "b" button, I want to left-pad and right-pad that word with tags, and set the new selection on the entire chunk, that is the opening tag, the originally selected word and the closing tag. IE provides a method to get the selected text, but not its offset, so I don't know how to achieve this. – SexyBeast Jun 26 '12 at 04:42
  • 1
    Rangy itself is for selections and ranges within the regular text on the page, not for textareas. I've written a [separate jQuery plug-in](http://code.google.com/p/rangyinputs/) for textareas and text inputs. – Tim Down Jun 26 '12 at 11:14
  • Yeah, it is working even in IE, i.e we can access the selectionsStart in IE also, whereas previously we could only modify it, but not get the offset. How did you do it? IE doesn't support it after all. And secondly, it is inconsistent, when you select the first line in the demo textbox and click to get the selection, Firefox shows (0,14) while IE shows (0,16). – SexyBeast Jun 26 '12 at 11:19
  • I used [this function](http://stackoverflow.com/a/4207763/96100). The reason the offsets are inconsistent is that IE (and Opera) represent line breaks in the `value` property of textareas as `\r\n` while other browsers use `\n`, and `selectionStart` and `selectionEnd` properties are relative to the textarea's `value`. – Tim Down Jun 27 '12 at 08:20

0 Answers0