3

How can I get the current caret position in tinyMCE? Referring to this question "Get cursor position or number of line on which the cursor is in TinyMCE" there is mentioned how to get the line number in tinyMCE, however I can't find no reference on how to get the actual caret position? I need this since I am using tinyMCE as a document for real-time collaboration therefore I need to know the position of the caret for clients writing in the same document so that I broadcast the position on some events (keystroke, click, etc..) and paint custom carets on the position for one client to know where the other client is writing or editing.

The only solution I found was to add a span after the content, select it and remove it as follows:

     <span id="caret_pos_holder"></span>

Then once inserted, do this...

     ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
     ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span

Is this the only way around it?

EDIT: Actually the above only sets the position of the cursor to the end of the content, something which I already took care of using bookmarks.

Is it possible that there is nothing that can get the cursor's position?

Community
  • 1
  • 1
Bernice
  • 2,552
  • 11
  • 42
  • 74
  • What are you hoping for? A single number representing the caret position? – Tim Down Mar 15 '13 at 17:03
  • well yes! that's exactly what I need since I need to know where the caret is all the time while the users are typing or moving the caret around with their mouse or arrow keys. It seems almost impossible though! – Bernice Mar 15 '13 at 17:13
  • I don't think a single number could suffice. Maybe a path down to the element? Something like `html > body > div:first-child + table > thead:first-child + tbody > tr:first-child + tr > td:first-child + td + td > p:first-child+ p > strong:first-child > the 53rd character` – biziclop Mar 15 '13 at 17:36
  • It's not a natural fit with HTML: the correlation between what the user sees on-screen and the DOM is a bit convoluted. For example, multiple spaces within the HTML collapse to a single space on screen, elements can be hidden with CSS, on-screen line breaks come implicitly from block elements. – Tim Down Mar 15 '13 at 17:37
  • yes I know about that @TimDown .. however if I find a way on how to find the cursor position, I think I can work around this .. for example pre spacing with CSS? So it really doesn't exist? :( – Bernice Mar 15 '13 at 17:45
  • 1
    All that said, you may find the following useful: http://stackoverflow.com/a/8757511/96100 and http://stackoverflow.com/a/13950376/96100. You'll need to adapt it slightly to use the iframe's document rather than `document`. – Tim Down Mar 15 '13 at 17:48
  • did any of the above wor for you @Bernice? – Charbel Feb 25 '16 at 10:41

1 Answers1

2
var sel = ed.selection.getSel();

will return the current selection as a selection object. You can then query sel.anchorNode and sel.anchorOffset to get current caret position.

Broadcasting this data to the other client(s) would be easier than trying to extract the position as a number, but if that's really necessary, you could climb the DOM from the position given above.

Trinimon
  • 13,839
  • 9
  • 44
  • 60
andyroid
  • 341
  • 3
  • 3