次の方法で共有

[方法] HTML エディタ フィールド コントロールにボタンを追加する

  • [アーティクル]

HTML エディタ フィールド コントロールには、ユーザーが HTML および CSS コードを入力せずに、表、リストなど、HTML 要素を挿入し、スタイルを適用できるようにするビルトイン ボタンが用意されています。ここでは、このエディタにカスタム ボタンを追加し、新しい機能を提供する方法について説明します。

手順

HTML エディタ フィールド コントロールにカスタム ボタンを追加するには

  1. マスタ ページ ギャラリーの [編集メニュー] フォルダにある RTE2ToolbarExtension.xml ファイルを開きます。HTML エディタ フィールド コントロールへのカスタマイズはすべて、このファイルに設定する必要があります。

  2. <RTE2ToolbarExtensions> の下に <RTE2ToolbarExtraButton> タグを追加します。たとえば、ファイルを次のように変更します。

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

    この変更により、extraButtonTestId という ID の新しいボタンが追加されます。ボタンがクリックされたときに目的の操作を実行する JavaScript コードを含むソース ファイルも指定する必要があります。

  3. 手順 2. で言及されている JavaScript ファイルを作成してアップロードします。このファイルには以下の内容が含まれている必要があります。

    • ボタンの onClickCallback メソッドの実装。

    • ボタンの onResetStateCallback メソッドの実装。このコードは、エディタ ツール バーの状態がリセットされたときに実行されます。例 :RTE2_RegisterToolbarButton(mnemonic, iconUrl, text, toolTip, onClickCallback, onResetStateCallback, arguments) 関数の呼び出し。.

      以下は、この関数の 7 つのパラメータです。

      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/ フォルダに保存し, .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)
}

See Also

その他のリソース

共通ページとサイトのカスタマイズ作業