Get the coordinates of selection in CKEditor

Question

When a text is selected I want a span to appear above it (like a tooltip). This is the span:

var span = new CKEDITOR.dom.element.createFromHtml('<span style="position:absolute; display: none; " >Tooltip</span>'); span.setStyle('border', '2px solid black'); span.setStyle('width', '50px'); span.setStyle('height', '50px');

It must be added above the selection but I can't find a way to get the coordinates of the selection:

span.setStyle('display', 'none');
var editorSel = editor.getSelection();
var selElement = editorSel.getSelectedElement();
if (editorSel.getSelectedText() != '') {
setTimeout(function() {
     //Some way to get the coordinates
     span.setStyle('top', top + 'px');
     span.setStyle('left', left + 'px');
     span.setStyle('display', 'block');

     var ranges = editorSel.getRanges();
     var range = ranges[0];
     range.insertNode(span);
}

Any help will be highly appreciated.

Answer 1

You can get the editor window object from CKEditor using the following, although there may be a more direct way:

var win = editor.window.$;

From there, you could use getSelectionCoords() from this answer:

var coords = getSelectionCoords(win);