How to make tinymce textarea editor droppable?

Question

I have this html:

 <ul id="some_words">
   <li>Word 1</li>
   <li>Word 2</li>
   <li>Word 3</li>
 </ul>

I made these words ( word1; word2; word3 ) draggable by this:

$("#some_words li").draggable({helper: 'clone'});

And to make droppable textfield I did:

$("#my-text_field").droppable({ accept: "#some_words li", drop: function(ev, ui) { alert('fired');// } });

There is also an <textarea> where TinyMCE (editor) is applied so how can this Tinymce be droppable as I did for the text field.

Now when I try to drop any word into text field it shows alert box but when try to drop it into a tinyMCE (textarea) then nothing happens.

If anybody know how to make 'TinyMCE' droppable?

Thanks

Answer 1

TinyMCE hides the textarea to create an iframe just next to it. So you have to get the element of the iframe you want droppable.

Basicly, you could reach it with :

$('#my-textarea')
    .next('span.mceEditor')
    .find('iframe')
    .contents()
    .find('.mceContentBody')

(found with inspector on TinyMCE demo for jquery)

Make sure you load TinyMCE first, then you can apply your droppable.