Created a custom image uploader for the Rich Text Editor, but how do I insert the image?

Question

Some background: I have created a custom image uploader for my rich text editor. I feel like I have taken the functionality most of the way, currently it can:

• Upload the image to another server
• Return the URL for that image

But what I am having trouble with is inserting that image at the cursor location in the rich text editor. Currently I have the following code:

Pub.Ribbon.PubRibbonComponent.launchDialog('_layouts/RteUploadDialog_Advanced.aspx', SP.Publishing.Resources.media_UploadPreview, null, null, Function.createDelegate(this, function(dlgResult, returnValue) {ULS9gA:;
        //var linkUrl = Pub.Ribbon.PubRibbonComponent.getLinkHref(returnValue);
        alert(returnValue);
        if (returnValue) {
            var imgHtml = '<IMG SRC="' + returnValue+ '">';
            var fieldId = 'ctl00_m_g_1369c271_632d_4e38_bfbd_292ae83f1ecc_ff2_1_ctl00_ctl00_TextField_inplacerte';
            RTE_GiveEditorFocus(fieldId);
            RTE_SaveSelection(fieldId);
            RTE_GetSelection(fieldId).pasteHTML(imgHtml);

            );
        }
            }));
});
}

I went ahead and left everything that I have tried before in there (but commented out) to give you an idea of what I have tried. I had throught that the line:

RTE_GetSelection(fieldId).pasteHTML(imgHtml);

Would take care of this, but it can't seem to find the fieldId for some reason. Can anyone suggest how I can get the image tag I have into my Rich Text Editor at the cursor position?

Answer 1

Ok I finally found a solution to this after looking into some more detail on how SharePoint is inserting images. Hope this helps someone:

Pub.Ribbon.PubRibbonComponent.launchDialog('_layouts/RteUploadDialog_Advanced.aspx', SP.Publishing.Resources.media_UploadPreview, null, null, Function.createDelegate(this, function(dlgResult, returnValue) {
var fieldId = 'ctl00_m_g_1369c271_632d_4e38_bfbd_292ae83f1ecc_ff2_1_ctl00_ctl00_TextField_inplacerte';
                if (returnValue) {
            var imgHtml = '<IMG SRC="' + returnValue+ '">';
            var $rte = document.parentWindow.document.getElementById(fieldId);
            $rte.focus();
            var rteDoc = $rte.document.selection;
            var range = rteDoc.createRange();
            range.pasteHTML(imgHtml);
                }
            }));
});
}

As you can see the key is to use document.selection, createRange() and pasteHTML(). This is essentially what SharePoint's built in javascript is doing when you insert an image into a RichTextEditor.

Answer 2

the only way I found of doing this in 2007 was using telerik's rad editor I'm not sure if the 2010 version allows you to add controls.

I just could not get it to work for me, but I do hope you find a mod for the OOTB solution.