How to insert image at cursor position in tinymce

Question

I use the following codes to get a tinymce cone.

tinymce_content=tinyMCE.get('txt_area_id').getContent(); updated_content=tinymce_content+"<img src="sample.jpg">"; 

Using the codes above, I am inserting an image inside the contents of tinymce.

Question: How to insert an image at the cursor position inside tinymce (i.e.) How to predict the position of the cursor and divide the contents to insert an image between the selected content.

Thanks in advance

Answer 1

Insert a node image at a selected location (cursor position) in the tinymce editor

 var ed = tinyMCE.get('txt_area_id'); // get editor instance var range = ed.selection.getRng(); // get range var newNode = ed.getDoc().createElement ( "img" ); // create img node newNode.src="sample.jpg"; // add src attribute range.insertNode(newNode); // insert Node 

Answer 2

@Thariama's answer worked fine for me in Chrome, but not in IE. I had to change it to the following in order to make it work in both browsers:

 var ed = tinyMCE.get('txt_area_id'); // get editor instance var newNode = ed.getDoc().createElement ( "img" ); // create img node newNode.src="sample.jpg"; // add src attribute ed.execCommand('mceInsertContent', false, newNode.outerHTML) 

(IE told me that range does not have an insertNode method.)