Adding html to the rich text editor in SharePoint 2010

When working on integrating ImageVault into SharePoint 2010 I ran into a few problems. The plan was to add a custom button to the ribbon that would open the ImageVault dialog where you could select an image that would be inserted into the Content Editor Web Part (CEWP).

Adding buttons to the ribbon was fairly easy to do and finding information about, but after that I was on my own. The problem is that I can’t make changes to the content editor web part, but after reading thru miles of javascript code I managed to build a function that could insert an image.

function InsertIvRteCallback(url, altText) {
    RTE.Cursor.update();
    var html = '<img alt="'+ altText +'" src="' + url + '">';
    var rawRange = RTE.Selection.getSelectionRange().$C;
    RTE.DomHelper.pasteHtmlIntoRange(rawRange, html)
}

The RTE.Cursor.update() is need because the editor lost focus when clicking the button in the ribbon and the html was pasted at the top of the page, way outside the web part.

The next step was to check if an image was selected so I could get the url and send it into the ImageVault dialog. This was a bit easier because I found a finished function that did exactly that.

if(RTE.Cursor.getSelectedImage() != null){
        src = RTE.Cursor.getSelectedImage().src;
}

I put all the javascripts in a separate file and added the path to SP.UI.Rte.xml. This worked great on one site but on another it throw a Sys.ScriptLoadFailedException. After a bit googeling I found this page where I got this piece of code that I added to the javascript file and that solved the problem.

if( Sys && Sys.Application ){
   Sys.Application.notifyScriptLoaded();
}

This may not be the best way of doing this. The insert function is a bit messy so if anyone knows a nicer way to do this please leave a comment.

Leave a comment