2

Let's suppose I have such handler:

ed.onNodeChange.add(function(ed, cm, e) {
});

How to get the position (top left corner coordinates) of the current object e that has fired an event?

I need this to be able to draw my own floating popup (div) right below/above the current block.

zerkms
  • 249,484
  • 69
  • 436
  • 539

1 Answers1

2

Try this:

Relative to editor window:

ed.onNodeChange.add(function(ed, cm, e) {
    console.log( tinymce.DOM.getPos(e) );

    /* Ex:
     *   Object
     *   x: 8
     *   y: 30
     */
});

Relative to body that holds the editor:

// From http://stackoverflow.com/questions/442404/dynamically-retrieve-html-element-x-y-position-with-javascript
function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { y: _y, x: _x };
}

tinyMCE.init({
    // ...
    setup: function(ed) {
        ed.onNodeChange.add(function(ed, cm, e) {
            var coords = tinymce.DOM.getPos(e),
                ed_coords = getOffset( ed.getContentAreaContainer() ),
                x, y;

            x = coords.x + ed_coords.x;
            y = coords.y + ed_coords.y;
        });
    }
});
simshaun
  • 21,263
  • 1
  • 57
  • 73
  • Thanks. But it returns coordinates relative to the editor. For drawing my own floating div I need the absolute ones. Or am I missing something? – zerkms Dec 01 '11 at 21:35
  • Well, to keep things simple you could always get the coordinates of the editor window and add them to the results of `tinymce.DOM.getPos()`. See my example at http://simshaun.com/tinymce/blockcoords/ – simshaun Dec 01 '11 at 21:47
  • hehe ;-) Actually I've found that the most appropriate way will be to use relative coordinates everywhere (like tinymce menu does) – zerkms Dec 01 '11 at 21:52