Me and a colleague of mine (Selvi) had to create a custom action button in the HTML Editor Control in SharePoint that performs a few bits of cool functionality. The button had to pop-up a custom aspx page with some custom options and behavior. I found documentation on this topic to be reasonably poor, so I decided to blog about what we did.
Adding the actual button isn't that hard. `The Mossman' has a nice post on this How to Add a Button to the HTML Editor Control in SharePoint. And there's also an MSDN article that describes this: How to: Add a Button to the HTML Editor Field Control.
The RTE2ToolbarExtension.xml file allows you to add extensions to the HTML editor control. You specify a new tag that points to a JavaScript file holding the button's behavior. Further below is the code that we used for our button's click event. The articles above describe the rest of the code that you need for the button to work, so there's no need for me to repeat it.
function LinkImage_OnClick(strBaseElementID, args)
{
var HrefValue = null;
var sFeatures=fnSetValues();
var listName = "Media Files";
var url = "/_layouts/CustomAppPages/AssetInsertLinkImage.aspx";
var selectedFile = window.showModalDialog(url, selectedFile, sFeatures);
var selectedFileValues_array = selectedFile.split("$");
var imageUrl = selectedFileValues_array[0];
var hrefUrl = selectedFileValues_array[1];
var hrefTarget = selectedFileValues_array[2];
var docEditor=RTE_GetEditorDocument(strBaseElementID);
if (docEditor==null) { return; }
var selection=docEditor.selection;
var rngSelection=selection.createRange();
rngSelection=selection.createRange();
rngSelection.pasteHTML("<a href='"+hrefUrl+"' class='aImage' target='"+hrefTarget+"'><img alt='' src='"+imageUrl+"' /></a>");
}
Our goal was to return multiple values from the opened window and manipulate them in the javascript of the button. We originally tried to modify a copy of AssetImagePicker.aspx but stumbled into problems. We found an asset picker control within an <asp:Placeholder> that was hidden at runtime. We removed the control outside of the placeholder and had problems returning the values populated by the user from that specific control that was originally hidden. We couldn't figure out why so we took a different approach. The MSDN article How to: Customize the Asset Picker wasn't very helpful on this. (Anyone have any ideas?)
We created a fresh aspx page and added two some asset picker controls. We styled it to look like a typical SharePoint pop-up and with some code-behind we returned the values to the parent javascript code within the action button's click event. So here's the code we ended up with for the button:
public class AssetInsertHyperLinkImage : System.Web.UI.Page
{
protected AssetUrlSelector assetSelectedUrl;
protected AssetUrlSelector AssetUrlSelector1;
protected CheckBox Checkbox1;
protected override void OnInit(EventArgs e)
{
//Create an event handler for the button's click event
//The button belongs to dialog.master – OkButton
((DialogMaster)this.Page.Master).OkButton.Click += new EventHandler(this.btnOk_Click);
base.OnInit(e);
}
protected void btnOk_Click(object sender, EventArgs e)
{
//get the values from the controls
string returnVariable = assetSelectedUrl.AssetUrl;
returnVariable += "$" + AssetUrlSelector1.AssetUrl;
returnVariable += "$" + CheckTrueFalse();
String strScript = default(String);
//inject some JS and the window.returnValue string
strScript = "<script>";
strScript += "window.returnValue='" + returnVariable + "';";
strScript += "window.opener=self;";
strScript += "window.close();";
strScript += "</script>";
Response.Write(strScript);
}
protected string CheckTrueFalse()
{
if (Checkbox1.Checked)
return "_blank";
else
return "_self";
}
}
<%@ Assembly Name="CustomApplicationPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a10a1e7c8f664a65" %>
<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Assembly Name="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint.WebControls" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Page Language="C#" Inherits="CustomApplicationPages.AssetInsertHyperLinkImage"
MasterPageFile="/_layouts/dialog.master" %>
<%@ Register TagPrefix="CMS" Namespace="Microsoft.SharePoint.Publishing.WebControls"
Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormSection" Src="/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" Src="/_controltemplates/InputFormControl.ascx" %>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderDialogBodyMainSection"
runat="server">
<table class="ms-authoringcontrols" cellspacing="0" cellpadding="0" width="100%"
border="0" style="padding-left: 20px">
<tr>
<td height="10px" class="ms-descriptiontext" colspan="2">
<img src="/_layouts/images/blank.gif" width="1" height="10" alt="">
</td>
</tr>
<tr>
<td width="25px">
<img src="/_layouts/images/blank.gif" width="25" height="1" alt="">
</td>
<td class="ms-assethyperlinkdialog-editcontrolcell">
<wssuc:InputFormControl
LabelText="<%$Resources:cms, asseteditimage_selectedimage_label%>"
LabelAssociatedControlId="assetSelectedUrl" runat="server">
<template_control>
<CMS:AssetUrlSelector id="assetSelectedUrl"
CssTextBox="ms-input ms-assethyperlinkdialog-longtextbox"
MaxLength=512 DecodeUrlPath="false" runat="server"
AccessibilityName="<%$Resources:cms, assetedithyperlink_selectedurl_label%>"
/>
<div>
<asp:RequiredFieldValidator ID="assetSelectedUrlValidator"
EnableClientScript="False" Display="Dynamic"
ControlToValidate="assetSelectedUrl"
Text="<%$Resources:cms, assetedithyperlink_selectedurl_required%>"
Runat="server" />
</div>
</template_control>
</wssuc:InputFormControl>
</td>
</tr>
<tr>
<td width="25px">
<img src="/_layouts/images/blank.gif" width="25" height="1" alt="">
</td>
<td class="ms-assethyperlinkdialog-editcontrolcell">
<wssuc:InputFormControl
LabelText="<%$Resources:cms, assetedithyperlink_selectedurl_label%>"
LabelAssociatedControlId="AssetUrlSelector1" runat="server">
<template_control>
<CMS:AssetUrlSelector id="AssetUrlSelector1"
CssTextBox="ms-input ms-assethyperlinkdialog-longtextbox"
MaxLength=512 DecodeUrlPath="false"
AccessibilityName="<%$Resources:cms, assetedithyperlink_selectedurl_label%>"
runat="server" />
<div>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
EnableClientScript="False" Display="Dynamic"
ControlToValidate="AssetUrlSelector1"
Text="<%$Resources:cms, assetedithyperlink_selectedurl_required%>"
Runat="server" />
</div>
<BR />
<asp:Checkbox id="Checkbox1" runat="server" />
<asp:Label id="Label2" runat="server" AssociatedControlID="Checkbox1"
Text="<%$Resources:cms, assetedithyperlink_openlinkintarget_newwindow%>" />
</template_control>
</wssuc:InputFormControl>
</td>
</tr>
</table>
</asp:Content>
We also created a feature to deploy the .aspx and code-behind files.
I hope this helps someone.
radi a.