How to: Add a Button to the HTML Editor Field Control

Unfortunately, I think this document is flawed in many ways. Because of this, the other day, I set out to actually get it working, and in the process I have simplified their example and have made it a bit more useful (hopefully). I’m not sure why their example is filled with syntax errors, contains unnecessary logic (example: always reading the second item in an array?!?!), and does not bother to reset the button to a usable state when they are done. Never the less, I think I have a basic understanding of how to use it. Note: I’m not guaranteeing this is the right way to do it, but it worked for me. Searching online and in the sdk for functions starting with RTE_ is pointless; Microsoft has left us out in the cold on this one.

My example doesn’t do anything particularly useful, it just allows you to select a piece of text, click the newly created button, a javascript prompt appears asking for a url, and then whatever you type in that prompt is linkified in the html text area. Yes, I realize you can already make links in the out of the box control, but I had a specific need to bolt something extra onto a special link type… thus this customization was born.

The first thing you need to do to add your own button, is to edit the RTE2ToolbarExtension.xml file with SharePoint Designer. The file is located at:

“YOURSITE”/_catalogs/masterpages/Editing Menu/RTE2ToolbarExtension.xml

Much like the example tries to do (though is missing the closing tag), mine simply contains:

             src=”RTE2ToolbarExtraButtonTest.js” mce_src=”RTE2ToolbarExtraButtonTest.js” />

This tells SharePoint to look for my own Javascript file called RTE2ToolbarExtraButtonTest.js which is located on the server at:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\RTE2ToolbarExtraButtonTest.js

Since this file is on the server you will most likely need to remote to your SharePoint 2007 server to do any editing.

I have included the source of my new button’s Javascript code below. Hopefully it’s commented well enough that I don’t need to write up a walkthrough. I would give more explanation of what’s going on inside of it, but like I said, I couldn’t find any documentation on the RTE_methods. When you save this file to the 1033 directory, you may need to cycle your web application pool before the changes are apparent (also, you may have to check in and publish your RTE2ToolbarExtension.xml file from SharePoint Designer). Once the files are created, simply go to your SharePoint site and Edit some page content with Internet Explorer. When you select some text, the rich text editor should appear and our new button will show. Clicking on the button will launch the javascript prompt and when you click Ok, it should linkify your selected text, and it should return the button state to clickable. See the attached screenshot:

RTE2ToolbarExtraButtonTest.js

——————————

//the function that is called on button click

function TestButtonOnClick(strBaseElementID, arguments) {

//get the document that is being edited

var docEditor=RTE_GetEditorDocument(strBaseElementID);

//if nothing is being edited quit

if (docEditor==null) { return; }

//get the selected text

var selection=docEditor.selection;

var rngSelection=selection.createRange();

//pop open a simple javascript prompt

var reply = prompt(“Please enter a valid URL:”, “”)

//take the return of the prompt and set a link url to it and

      //set the label of the link to the selected text

//rngSelection is our selected text, and we are using the

      //pasteHTML method to overwrite it with our link

rngSelection.pasteHTML(““+rngSelection.htmlText+”“);

//restore the button state (make it clickable again)

RTE_RestoreSelection(strBaseElementID);

return true;

}

// The function that is called when the button’s state is reset.

function TestButtonOnResetState(strBaseElementID, arguments) {

//get the document that is being edited

var docEditor=RTE_GetEditorDocument(strBaseElementID);

//if nothing is being edited quit

if (docEditor==null) { return; }

//actually enable the button

// Parameters:

// 1 – Pass in the ID of the actual editor (which

            //     automatically is sent over on the reset call)

// 2 – Boolean, True to turn it back on, False to

            //     keep it off

// 3 – The name of the button to turn on

RTE_TB_SetEnabledFromCondition(strBaseElementID, true, ‘myCustomButton’);

return true;

}

// Register the toolbar button, which is necessary for the button

// to be displayed

// Parameters:

// 1 – What we want to call the button

// 2 – A reference to a url for the button icon (I picked an

//     existing one for simplicity)

// 3 – What text we want to say next to the button

// 4 – The tooltip for the button

// 5 – The name of the function to call when it is clicked

// 6 – The name of the function to call when the button is

      //     reset (or done being clicked)

RTE2_RegisterToolbarButton(“myCustomButton”, RTE_GetServerRelativeImageUrl(“rtelnk.gif”), “Custom Button”, “Custom Tooltip”, TestButtonOnClick, TestButtonOnResetState);