0

I am working on a project where I am using tinyMCE https://www.tiny.cloud/.

I want to get the caret position inside the TinyMCE editor on the screen not within the textbox as I want to be able to position a div based on where the caret is on the screen.

The only things I've found is getting the caret position from inside the text editor in order to create range of text within the editor which isn't what I'm after.

Boardy
  • 35,417
  • 104
  • 256
  • 447
  • You should take a look at the [`document.execCommand(...)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) function. – Titus May 10 '19 at 17:31
  • @Titus I've had a look at the link but I'm not sure how that helps with what I am trying to achieve. – Boardy May 10 '19 at 17:38
  • You could use the `insertText` or `insertHTML` to insert something at the cursor position in a `contentEditable` element. – Titus May 10 '19 at 17:39
  • I'm not trying to insert content into the editor. I am just wanting to get the caret position on the screen to overlay a `div` over the editor near to where the caret when a certain character is typed - I'm not editing the editor content – Boardy May 10 '19 at 17:42
  • I see, in that case, you could get the coordinates of the first/last range in the selection. Something like `document.getSelection().getRangeAt(0).getBoundingClientRect()` – Titus May 10 '19 at 17:45
  • Thanks I've given that a try, but all the coordinates it returns are 0. – Boardy May 10 '19 at 17:50
  • If I'm not mistaking, **tinyMCE** uses an `iframe`, you'll have to access that `iframe`'s document instead of the top document. – Titus May 10 '19 at 17:52
  • Hmm. I've looked at http://archive.tinymce.com/wiki.php/API3:method.tinymce.Editor.getDoc which seems to do what you suggest so its now `tinymce.get('txtNote').getDoc().getSelection().getRangeAt(0).getBoundingClientRect();` but all the co-ordinates are still 0 – Boardy May 10 '19 at 17:58
  • I've tested it on https://www.tiny.cloud/ `tinyMCE.editors[0].getDoc().getSelection().getRangeAt(0).getBoundingClientRect()` returns the coordinates. You have to select something in the example editor first. – Titus May 10 '19 at 18:05
  • Ah that's the problem, I'm not selecting anything, I'm just typing a specific character and that causes a div to appear – Boardy May 10 '19 at 18:14
  • My mistake, I don't mean you need to select (highlight) something, you just need to focus the `contentEditable` element, make sure the caret is somewhere inside of it. – Titus May 10 '19 at 18:25
  • Wouldn't it be already be in focus as I'm typing into it? – Boardy May 10 '19 at 18:55
  • Yes, that is true unless you're focusing something else inside the key listener callback. Also, you can get 0 coordinates in some cases when the focused node is a text node that contains spaces. This solution has a fix for that https://stackoverflow.com/a/6847328/1552587 – Titus May 10 '19 at 19:00
  • @Titus Got it working with what you said, I wasn't changing focus so I didn't have to worry about that. I think when I tried it previously my browser cached the original. Can you make it an answer what you suggested and I can accept it. – Boardy May 11 '19 at 15:11

0 Answers0