如何：将按钮添加到 HTML 编辑器字段控件

项目
06/15/2015

HTML 编辑器字段控件提供内置按钮，使用这些按钮，用户可插入 HTML 元素（例如，表和列表）并应用样式，而无需键入 HTML 和 CSS 代码。本主题演示如何将自定义按钮添加到此编辑器以提供一类新功能。

过程

向 HTML 编辑器字段控件添加自定义按钮

打开母版页样式库中的 Editing Menu 文件夹中的 RTE2ToolbarExtension.xml 文件。必须在此文件中引用对 HTML 编辑器字段控件进行的所有自定义。
在 <RTE2ToolbarExtensions> 下方添加一个 <RTE2ToolbarExtraButton> 标记。例如，按如下所示更改文件：
```
<?xml version="1.0" encoding="utf-8" ?>
<RTE2ToolbarExtensions>
     <RTE2ToolbarExtraButton id="extraButtonTestId" 
        src="RTE2ToolbarExtraButtonTest.js" />
```
此更改将添加一个 ID 为 extraButtonTestId 的新按钮。还必须指定一个包含 JavaScript 代码的源文件，在单击该按钮时此代码将执行所需操作。
创建并上载步骤 2 中引用的 JavaScript 文件。此文件必须包含：
- 针对按钮的 onClickCallback 方法的实现。
- 针对按钮的 onResetStateCallback 方法的实现。在重置编辑器工具栏的状态时，此代码将运行。例如：RTE2_RegisterToolbarButton(mnemonic, iconUrl, text, toolTip, onClickCallback, onResetStateCallback, arguments) 函数的调用。
  
  下面是针对此函数的七个参数：
  
  mnemonic   按钮的助记键。
  
  iconUrl   为按钮显示的图标文件的路径。
  
  Text   要在按钮的图标旁边显示的文本。
  
  toolTip   当停留在按钮上方时显示的工具提示。
  
  onClickCallback   在单击按钮时调用的方法。
  
  onResetStateCallback   在更改编辑器的任何状态时调用的方法。此方法通常用于启用和禁用基于用户已在编辑器窗口中突出显示的文本的按钮。
  
  arguments   一个对象，当运行 onClickCallback 和 onResetStateCallback 方法时将为这两个方法传递此对象。
下面是 RTE2ToolbarExtraButtonTest.js 可以包含的内容的示例：
```
[js]
// The method that is called when the button is clicked.
function TestButtonOnClick(strBaseElementID, arguments) {
alert("TestButton: I was clicked in " + strBaseElementID + ": " + 
arguments[1]); 
}

// The method that is called when the button's state is reset.
function TestButtonOnResetState(strBaseElementID, arguments) {
var docEditor=RTE_GetEditorDocument(strBaseElementID);
if (docEditor==null) { return; }
RTE_RestoreSelection(strBaseElementID);
var selection=docEditor.selection;
var rngSelection=selection.createRange();
rngSelection=selection.createRange();
rngSelection.pasteHTML("Resetting TestButton state! ");
return true;
}

// Register the toolbar button, which isnecessary for the 
// button to be displayed
RTE2_RegisterToolbarButton(
"testButton", 
RTE_GetServerRelativeUnlocalizedImageUrl("rte2spchk.gif"), 
"<- Test button", 
"This is my test button for toolbar extensibility", 
TestButtonOnClick,
TestButtonOnResetState,
new Array("one", "two", "3"));
```
将此文件上载到步骤 2 中指定的路径。src 参数中的位置相对于 \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\ 目录。对于此示例，应直接将 RTE2ToolbarExtraButtonTest.js 上载到此目录。

现在，打开的所有 HTML 编辑器字段控件都具有已创建的额外按钮。

备注

可以在文件中查看内置 HTML 编辑器字段控件源的 JavaScript 源。

若要更深入地了解如何添加强大的新编辑器功能，请通过路径 \Program Files\Common Files\Microsoft Shared Debug\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\HtmlEditor.js 浏览到 HtmlEditor.js 文件。

示例

下面的示例将向 HTML 编辑器字段控件添加一个按钮。当单击此按钮时，它将更改表单元格的背景色。

若要使用此示例，请将以下 XML 代码作为 RTE2ToolbarExtension.xml 保存到 /_catalogs/masterpage/Editing Menu/ folder，并将 .js 文件保存到 \Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033。

[xml]

  <?xml version="1.0" encoding="utf-8" ?> 
- <RTE2ToolbarExtensions>
  <RTE2ToolbarExtraButton id="bgColorButton" src="CodeSample.js" /> 
  </RTE2ToolbarExtensions>

var bgColor_mnemonic = "CodeSampleButtonId";

// The button has been clicked.
function BgColor_OnClick(strBaseElementID, args)
{
var elemCell=RTE_GetNearestContainingElementOfTypes(strBaseElementID, g_aTableCellTagNames);
if (elemCell==null
|| RTE2_IsSourceView(strBaseElementID)
|| !RTE2_ElementInContentArea(strBaseElementID, elemCell) )
{
return;
}

var dialogHelper=RTE_GetDialogHelper();
if (dialogHelper !=null)
{
var initialBgColor = elemCell.bgColor;

var newBgColor=dialogHelper.ChooseColorDlg(initialBgColor);
newBgColor=newBgColor.toString(16);
if (newBgColor.length < 6)
{
var tempString="000000".substring(0,6-newBgColor.length);
newBgColor=tempString.concat(newBgColor);
}
if (newBgColor.toUpperCase() != args.transparentColor.toUpperCase())
{
                elemCell.bgColor = newBgColor;
}
else
{
elemCell.bgColor = "";
}
}
RTE_GiveEditorFocus(strBaseElementID);
}

// The current state of the editor has changed.
// Should the Cell background button remain clickable?
function BgColor_OnResetState(strBaseElementID, args)
{
var elemCell=RTE_GetNearestContainingElementOfTypes(strBaseElementID, g_aTableCellTagNames);
if (elemCell==null
|| RTE2_IsSourceView(strBaseElementID)
|| !RTE2_ElementInContentArea(strBaseElementID, elemCell) )
{
RTE_TB_SetEnabledFromCondition(strBaseElementID, false, bgColor_mnemonic);
}
else
{
RTE_TB_SetEnabledFromCondition(strBaseElementID, true, bgColor_mnemonic);
}
return true;
}

// Register the button.
{
var iconUrl = "/_layouts/" + L_Language_Text + "/images/rtebkclr.gif";
var text = "Edit Cell Background Color";
var toolTip = text;
var onClickCallback = BgColor_OnClick;
var onResetStateCallback = BgColor_OnResetState;
var args = new Object();
args.transparentColor = "FFFFFF";
RTE2_RegisterToolbarButton(bgColor_mnemonic, iconUrl, text, toolTip, onClickCallback, onResetStateCallback, args)
}

通过

如何：将按钮添加到 HTML 编辑器字段控件

过程

向 HTML 编辑器字段控件添加自定义按钮

示例

See Also

其他资源

其他资源