SharePoint Blogs / SharePoint University
SharePoint Blogs and SharePoint University - all in one place!
Integrating Radi with SharePoint and Dynamics CRM » Custom Actions in the SharePoint Rich HTML Editor Control with a custom Pop-up dialog
Need SharePoint Training? Attend a SharePoint Bootcamp!

Please delete cookies related to sharepointblogs.com and sharepointu.com to resolve login issues!

Custom Actions in the SharePoint Rich HTML Editor Control with a custom Pop-up dialog

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";

    }

}

And here is our ASPX page with some AssetUrlSelector controls :

<%@ 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.

Posted 04-16-2008 10:47 AM by Radi A.

Comments

Links (4/15/2008) « Steve Pietrek’s SharePoint Stuff wrote Links (4/15/2008) &laquo; Steve Pietrek&#8217;s SharePoint Stuff
on 04-15-2008 8:21 PM

Pingback from  Links (4/15/2008) &laquo; Steve Pietrek&#8217;s SharePoint Stuff

SharePoint 2007 Link Love:04-17-2008 at Virtual Generations wrote SharePoint 2007 Link Love:04-17-2008 at Virtual Generations
on 04-16-2008 5:58 PM

Pingback from  SharePoint 2007 Link Love:04-17-2008 at  Virtual Generations

Christian Handler wrote re: Custom Actions in the SharePoint Rich HTML Editor Control with a custom Pop-up dialog
on 05-15-2008 4:19 AM

Pingback from SharePoint 2007 and othe Stuff by chandler

multiple images in one td javascript wrote multiple images in one td javascript
on 05-21-2008 11:56 AM

Pingback from  multiple images in one td javascript

Reco wrote re: Custom Actions in the SharePoint Rich HTML Editor Control with a custom Pop-up dialog
on 01-05-2009 4:07 AM

Hi;

We are using MOOS 2007. We have lots of users who can authority to access content.

We want those users to change font, size, color while they are accessing the content. We also want those users to select one of my templates which i have done accorind to CSS( <p>, <h1>,<h2>......)

Is there a custom application for this?

Regards

rdeneri@gmail.com

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Need SharePoint Training? Attend a SharePoint Bootcamp!
Posts (c) their respective authors. Everything else (c) 2009 SharePoint Experts, Inc.