CODEWITHSUNDEEP
javascripttinymceeditortinymce-4
michail_w
michail_w

Reputation: 4471

TinyMCE 4 - get caret position

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

Upvotes: 4

Views: 9626

Answers (1)

michail_w
michail_w

Reputation: 4471

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.

Upvotes: 13

Related Questions