Manipulate Tinymce Document DOM with JQuery

Question

I have a tinymce textarea that has a span tag like so: <span data-range-id="4oYnl5fH0">...</span>.

When the range of text is clicked, I want to show a pop up window next to the text.

The problem is that the text is hidden inside an iframe, so JQuery can't access it.

Is there any way to change the contents of something in an iframe with JQuery, specifically with tinymce? I can't just copy the contents and then paste it back in because I need to get the coordinates of where the text is on the screen To do so, I would use this:

position = $(this).offset();

Where this is the span tag

Answer 1

Yes, this is possible and easy.

var editor = tinymce.editors[0]; // or tinymce.get('your_editor_id') or tinymce.activeEditor

var $ed_body = $(editor.getBody());

// do whatever you want with the editor content located inside the body