Question

I have the following javascript which I am trying to use to insert an image into my content:

var imgHtml = '<IMG SRC="' + returnValue+ '">';
var $rte = document.parentWindow.document.getElementById(fieldId);
var rteDoc = $rte.document.selection;
var range = rteDoc.createRange();
range.pasteHTML(imgHtml);

This works if I select text, but when I just place the cursor in my content (but don’t select anything) the image is inserted in the top left corner of my page instead of in the content at the position of the cursor.

How do I insert at the cursor position when nothing is selected?

FYI – this only need to work in IE

Answer 1

Use createTextRange to get the cursor position, and moveEnd to offset it by a specified number of characters:

var imgHtml = '<IMG SRC="' + returnValue+ '">';
var $rte = document.parentWindow.document.getElementById(fieldId);
var range = $rte.createTextRange();
range.moveEnd('character',0);
range.pasteHTML(imgHtml);