MOSS Forum

Ask Question   UnAnswered
Home » Forum » MOSS       RSS Feeds

Can you create a custom button in the Rich Text Editor used on publishing page layouts?

  Asked By: Sherri    Date: Jan 07    Category: MOSS    Views: 1380

I was wondering if anybody has any resources which describes creating a new custom button for the rich text editor used on publishing page layouts? I know in MCMS02 there was the vbscript file you could customize, but don't know of anything like that (or different) in MOSS.



1 Answer Found

Answer #1    Answered By: Kristy Hicks     Answered On: Jan 07

You bet... there isn't much out there. First, I want to preface this that I recommend you rip this control out and look at the Telerik RadEditor Lite for MOSS which is free if you have a MOSS license. It produces XHTML compliant code but more importantly it is cross browser (whereas the RTE is only going to work in IE).

Check Randy's post on this subject here. Randy also has a link to a page  in the SDK about the subject. Make sure to read his comments at the bottom of the page.

Also, there is some info on this in the WCM chapter of the Pro SharePoint 2007 by WROX book.

Lastly, here's a snippet of one that I have in my upcoming book: Pro SharePoint 2007 WCM Development by WROX. It allows the user to enter some info about a link, specifically for microformats:

Code Snippet

// The method that is called when the button  is clicked.
function XfnButtonOnClick(strBaseElementID, arguments) {
// get reference to document currently being edited
var docEditor = RTE_GetEditorDocument(strBaseElementID);
if (docEditor == null) { return; }
// get reference to the selected text
var selectedRange = docEditor.selection.createRange();

// prompt user for url and microformat
var url = prompt("Enter the person's URL:","http://www.someone.com");
var xfn = prompt("Enter the XHTML friend (XFN) relationships:\nPossible values: me, parent, child, colleague, friend, spouse, sweetheart, met", "");

// create  the <a> HTML for the blog link
selectedRange.pasteHTML("<a href=\"" +url +"\" class=\"xfnRelationship\" rel=\"" +xfn +"\">" +selectedRange.htmlText + "</a>");

// restore selection

return true;

// The method that is called when the button's state is reset.
function XfnButtonOnResetState(strBaseElementID, arguments) {
// get reference to document currently being edited
var docEditor = RTE_GetEditorDocument(strBaseElementID);
if (docEditor == null) { return; }

// restore selection

// if text  is selected, show the button
if (docEditor.selection.createRange().text.length != 0){
RTE_TB_SetEnabledFromCondition(strBaseElementID, true, "xfnMicroformat");
} else {
RTE_TB_SetEnabledFromCondition(strBaseElementID, false, "xfnMicroformat");
return true;

// Register the toolbar button, which isnecessary for the
// button to be displayed
"Add XHTML Friends Network microformat link",
new Array());

There are other things needed for this (like CSS, images referenced by the microformat) as well as the changes to the XML file  RTE2ToolbarExtension.xml in the Master Page Gallery's Editing Menu subfolder.

Code Snippet

<?xml version="1.0" encoding="utf-8" ?>
<RTE2ToolbarExtraButton id="XfnMicroformat" src="RTEXfnMicroformat.js"/>