TinyMCE 4 - get caret position

Question

I want to get caret position in Tiny MCE 4, but I don't want to get row/column number - I want to get position in pixels (x & y dimmension). It can be relative to anything. Last thing - I want to do that without creating any additional tags in content, like bookmarks. Does TinyMCE have method to do that? Or is there option to get bookmark position in pixels, and after that removing it?

Thanks for replies

Answer 1

Ok, I found it.

First you have to get instance of tinymce.Editor class var editor = new tinymce.Editor(); //or another way, like tinyMCE.activeEditor

Next get with jQuery position of tinyMCE widgets:

var tinymcePosition = $(editor.getContainer()).position();
var toolbarPosition = $(editor.getContainer()).find(".mce-toolbar").first();

Now get position of HTML node, which you're currently edit:

var nodePosition = $(editor.selection.getNode()).position();
var textareaTop = 0;
var textareaLeft = 0;

We have Y-axis position (via nodePosition.top), it's time to get X:

if (editor.selection.getRng().getClientRects().length > 0) {
    textareaTop = editor.selection.getRng().getClientRects()[0].top + editor.selection.getRng().getClientRects()[0].height;
    textareaLeft = editor.selection.getRng().getClientRects()[0].left;
} else {
    textareaTop = parseInt($($this.selection.getNode()).css("font-size")) * 1.3 + nodePosition.top;
    textareaLeft = nodePosition.left;
}

We have in textareaTop && textareaLeft positions of caret relative to the TinyMCE editor Window (textarea). Now it's time to get position relative to the whole page (browser window):

var position = $(editor.getContainer()).offset();
var caretPosition = {
    top:  tinymcePosition.top + toolbarPosition.innerHeight() + textareaTop,
    left: tinymcePosition.left + textareaLeft + position.left
}

Solution is based on autocomplete plugin for TinyMCE 3, and I adapted it to my needs in TinyMCE 4.