Meridium: Webbplatser för offentlig sektor

Adding html to the rich text editor in SharePoint 2010

Skrivet av Fredrik Därth den 10 mars 2010 SharePoint 0 kommentarer

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.
After reading an article by Stuart Starrs I modified the javascript a bit to be more compatible and the result is below.

function InsertIvRteCallback(url, altText) {
    //create the DOM object to insert
    var img = document.createElement("img");
    img.src=url;
    img.alt=altText;
    //use the Cursor object from the RTE object to get a range
    var rng = RTE.Cursor.get_range();
    rng.deleteContent();
    rng.insertBefore(img);
    RTE.Cursor.update();
}

The RTE.Cursor.update() is need because the editor lost focus when clicking the button in the ribbon.

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.

Diskussion

Skriv kommentar

Ange kontrollordet i textfältet nedan.

Kategorier

Arkiv