Sharepoint 2010 RTE Image Picker for the Ribbon
// July 29th, 2010 // Uncategorized
Our current project required us to make a few changes to the OOTB Asset Picker dialog. Within this dialog there is the common “Look in” pane which isnt easily customized. We required the dialog to only show certain document libraries in which only png, jpeg or gif files may be viewed. Additionally we customized the picker to be launched from the ribbon and place the returned image within the rich text editor.
This all would not have been possible without the help of Karine Bosch’s Post on Custom Dialogs.
The following is a screenshot of the end product:
The page is invoked from a custom ribbon control however this only makes a call to our custom AssetPicker dialog. The source code (elements.xml) provides a split button control which invokes the picker for both replacing and inserting images. This ribbon control element (elements.xml) replaces the OOTB “Insert Image” control, however can be customized to add the default “From Address” and “From Computer” split options at a later stage.
The LaunchPicker method in the xml file invokes the OpenDialog method which in our project has been created as an extension to jQuery. However this need not be the case. Its merely a function which calls the SP.UI.ModalDialog.showModalDialog() method with a bunch of options. Note the callback method which is specified in the LaunchPicker method. This method is called once the image has been selected; this is known as the “callback method”. Careful that you only pass “replace” or “insert” to the LaunchPicker method.
Right lets move onto the AssetPicker itself. The .aspx is pretty much the simple part simply with a method which allows the user to choose the right image and invoke the callback method. It uses a repeater control to populate the images datasource.
The code-behind features several enhancements including a paging function. The repeater control provides us with the datasource of all the images found within the choosen folder or document library itself. Note: We have used a custom document library basetemplate and populate our treeview with these document libraries. This is where you may customize the code to search for Document Libraries or Image Libraries only. Be careful not to include generic lists as the code searches for files only.
Once the image has been chosen, the pickerCallBack callback method is fired as shown in javascript file. This in turn may replace or insert an image using the InsertRTEImage or ReplaceRTEImage depending on the options you passed to the launchpicker method.
The source files are attached.
