.NET TIPS ［ASP.NET］FreeTextBox上のツールバーをカスタマイズするには？ - C# VB.NET Webフォーム

.NET TIPS

［ASP.NET］FreeTextBox上のツールバーをカスタマイズするには？

山田祥寛
2005/08/26

　「TIPS：［ASP.NET］FreeTextBoxコントロールでリッチな入力ボックスを作成するには？」でも紹介したように、FreeTextBoxコントロールを利用することで、リッチ・コンテンツを編集するための入力ボックスをWebフォーム上で利用できるようになる。もっとも、先のTIPSでは、デフォルト状態のままでFreeTextBoxコントロールを使用したにすぎないが、FreeTextBoxコントロールには実にさまざまな機能（ツール）が含まれている。そこで本稿では、FreeTextBoxコントロールに含まれている機能の1つであるツールバーをカスタマイズする3つの方法について紹介する。

　なお、FreeTextBoxコントロールに含まれる機能は、以下のとおりだ。

機能名	概要
ParagraphMenu	パラグラフのスタイル設定
FontFacesMenu	フォント設定
FontSizesMenu	フォント・サイズ設定
FontForeColorsMenu	フォント色設定（選択ボックス）
FontForeColorPicker	フォント色設定（Color Picker）
FontBackColorsMenu	背景色設定（選択ボックス）
FontBackColorPicker	背景色設定（Color Picker）
Bold	太字
Italic	斜体
Underline	下線
Strikethrough	取り消し線
Superscript	上付き文字
Subscript	下付き文字
CreateLink	ハイパーリンクの挿入
Unlink	ハイパーリンクの削除
RemoveFormat	書式の削除
JustifyLeft	左ぞろえ
JustifyRight	右ぞろえ
JustifyCenter	中央ぞろえ
JustifyFull	均等割り付け
BulletedList	個条書き
NumberedList	番号付きリスト
Indent	インデント
Outdent	インデント解除
Cut	切り取り
Copy	コピー
Paste	貼り付け
Delete	削除
Undo	元に戻す
Redo	やり直し
Print	印刷
Save	保存
SymbolsMenu	記号の挿入
StylesMenu	スタイルの変更
InsertHtmlMenu	HTMLの挿入
InsertRule	水平線の挿入
InsertDate	日付の挿入
InsertTime	時刻の挿入
ieSpellCheck	スペルチェック
NetSpell	ネットスペルチェック
InsertImageFromGallery	イメージの挿入
InsertTable	テーブルの挿入
InsertTableRowBelow	下に行を挿入
InsertTableRowAbove	上に行を挿入
DeleteTableRow	行を削除
InsertTableColumnBelow	右に列を挿入
InsertTableColumnAbove	左に列を挿入
DeleteTableColumn	列を削除
InsertForm	フォームを挿入
InsertTextBox	テキストボックスを挿入
InsertTextArea	テキストエリアを挿入
InsertRadioButton	ラジオボタンを挿入
InsertCheckBox	チェックボックスを挿入
InsertDropDownList	ドロップダウンリストを挿入
InsertButton	ボタンを挿入
InsertDiv	タグを挿入

FreeTextBoxコントロールで利用可能な機能

　ただし、前掲のTIPSでも示したように、無償で利用可能な「FreeTextBox」では利用できない機能もあるので、注意してほしい。機能をフルに利用したい場合には、ライセンス料が必要な「FreeTextBox Pro」を購入する必要がある。

　上記のうち、InsertImageFromGallery機能（イメージの挿入）を利用するには、ダウンロード・ファイルに含まれるftb.imagegallery.aspxを、作成するWebフォーム（.aspxファイル）と同一のフォルダに配置する必要がある。また、アプリケーション・ルートの直下に画像を保存するためのimagesフォルダを用意しておくこと。

　ftb.imagegallery.aspxは画像のアップロードや画像のテキストへの埋め込みを行うWebフォームである（以下に示す［Image Gallery］ダイアログ・ページ）。これはデフォルトの設定で利用することも可能であるが、もちろん、用途に合わせてカスタマイズすることも可能だ。例えば、フォルダに対するアクセス権限を変更したい場合には、ImageGalleryコントロールに以下の属性を設定すればよい。

属性	概要
AllowDirectoryCreate	フォルダの作成を許可するか
AllowDirectoryDelete	フォルダの削除を許可するか
AllowImageUpload	画像のアップロードを許可するか
AllowImageDelete	画像の削除を許可するか
AcceptedFileTypes	アップロード可能な拡張子（文字列配列）

ImageGalleryコントロールで利用可能な主な属性

　次の画面は、FreeTextBoxコントロールのツールバーに配置された［Insert Image From Gallery］ボタンをクリックして、［Image Gallery］ダイアログ・ページ（＝ImageGalleryコントロール）を利用している例である（これは「FreeTextBox Forumsのトップ・ページに表示されるFreeTextBoxコントロール」で試すことができる）。

［Image Gallery］ダイアログ

FreeTextBoxコントロールのツールバーに配置された［Insert Image From Gallery］ボタンをクリックすると、［Image Gallery］ダイアログ・ページが開く。ここから画像のアップロードやテキストへの埋め込みなどを行うことができる。

　それでは以下、FreeTextBoxコントロールにこれら機能を追加する方法を紹介する。

1. ToolbarLayout属性から指定する方法

　ツールバーのレイアウトをカスタマイズするには、ToolbarLayout属性を利用するのが、最もシンプルな方法だ。ToolbarLayout属性には、機能名をカンマ（,）区切りで記述すればよい。アイコンの間にセパレータを挿入したい場合にはパイプ（|）を、ツールバーを分割したい場合にはセミコロン（;）を指定すればよい。

　次のサンプル・コードは、ToolbarLayout属性の指定例である。

<%@ Page ContentType="text/html" validateRequest="false" %>

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls"

  Assembly="FreeTextBox" %>

<html>

<body>

<form runat="Server">

<FTB:FreeTextBox id="ftb" runat="Server" Language="ja-JP"

  ToolbarStyleConfiguration="Office2003"

  ToolbarLayout="Cut, Copy, Paste, Delete, Undo, Redo | Bold, Italic, Underline, Strikethrough ; Superscript, Subscript" />

</form>

</body>

</html>

ToolbarLayout属性を使用した例（ftb_tool1.aspx）

　このサンプル・プログラムを実行すると、以下のようなテキストボックスが表示される。指定したアイコンがツールバーに並んでいるのが分かる。

ToolbarLayout属性で機能を指定したサンプル・プログラム（ftb_tool1.aspx）の実行結果

2. 配下のサーバ・コントロールから指定する方法

　ToolbarLayout属性は、確かにツールバーのレイアウトをカスタマイズするときには手軽な方法だ。しかし、例えばInsertHtmlMenu機能（HTMLの挿入）のように、オプション・リスト（メニューで表示される項目のリスト）を追加しなければ意味のない機能を有効化しようとした場合、ToolbarLayout属性では指定できないという問題がある。あくまでToolbarLayout属性は簡易なツールバー・カスタマイズの手段ととらえるべきだろう。

　オプション指定を含むツールバーの追加を行いたい場合には、ツールバーのレイアウトをFreeTextBoxコントロール配下のサーバ・コントロールで定義する必要がある。以下のサンプル・プログラムは、それを実際に行った例だ。

<%@ Page ContentType="text/html" validateRequest="false" %>

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls"

  Assembly="FreeTextBox" %>

<html>

<body>

<form runat="Server">

<FTB:FreeTextBox id="ftb" runat="Server" Language="ja-JP"

  ToolbarStyleConfiguration="Office2003"

  AutoGenerateToolbarsFromString="false">

  <Toolbars>

    <FTB:Toolbar runat="Server">

      <FTB:Cut runat="Server" />

      <FTB:Copy runat="Server" />

      <FTB:Paste runat="Server" />

      <FTB:Delete runat="Server" />

      <FTB:ToolbarSeparator runat="Server" />

      <FTB:Undo runat="Server" />

      <FTB:Redo runat="Server" />

    </FTB:Toolbar>

    <FTB:Toolbar runat="Server">

      <FTB:InsertHtmlMenu runat="server">

        <Items>

          <FTB:ToolbarListItem Text="My1" Value="<b>WINGS</b>"

            runat="Server" />

          <FTB:ToolbarListItem Text="My2" Value="<u>WebDeli</u>"

            runat="Server" />

        </Items>

      </FTB:InsertHtmlMenu>

    </FTB:Toolbar>

  </Toolbars>

</FTB:FreeTextBox>

</form>

</body>

</html>

配下のサーバ・コントロールから指定する例（ftb_tool2.aspx）

　FreeTextBoxコントロール配下のツールバー定義は、<Toolbars>要素の配下に記述する必要がある。1つのツールバーを表すのが、Toolbarコントロールだ。Toolbarコントロールは個々のメニュー項目のコンテナ・コントロールで、冒頭の一覧表「FreeTextBoxコントロールで利用可能な機能」に挙げた機能名と同名のコントロールを配置することができる。例えばInsertHtmlMenu機能を利用したい場合には、InsertHtmlMenuコントロールを利用すればよい。

　InsertHtmlMenuコントロールのように配下に選択オプションを追加できるコントロールでは、配下の<Items>要素直下にオプション・リストを定義することも可能だ。ここでは、［HTMLの挿入］メニューに「My1」「My2」と名付けた2つのオプションを追加しているというわけだ。

　また、配下のサーバ・コントロールでツールバーを定義する場合、AutoGenerateToolbarsFromString属性をfalseに設定しておくこと。さもないと、デフォルトで定義されたツールバーが自動生成されてしまう。

　なおアイコンの間にセパレータを挿入したい場合には、サーバ・コントロールとしてToolbarSeparatorコントロールを利用すればよい。

　以上を実行すると、以下のようなテキストボックスが表示される。

サーバ・コントロールとして機能を指定したサンプル・プログラム（ftb_tool2.aspx）の実行結果

　選択ボックス（［HTMLの挿入］メニュー）から「My1」または「My2」を選択すると、あらかじめ指定されたHTMLテキストがコンテンツに追加されることも確認してみよう（本稿の例では、「My1」なら「WINGS」というHTMLテキストが、「My2」なら「WebDeli」が挿入される）。

3. コードから動的に生成する方法

　上記1と2の方法は、静的にツールバーを定義する方法であるが、コードから動的にツールバーを追加することも可能だ。これは例えば、エンド・ユーザーに自由にツールバーのレイアウトを選択させたい場合などに利用すればよい。以下のサンプル・プログラムは、先ほどの静的な定義（ftb_tool2.aspx）を動的なコードに書き換えたものだ。

<%@ Page ContentType="text/html" Language="C#" validateRequest="false" %>

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls"

  Assembly="FreeTextBox" %>

<script runat="Server">

void Page_Load(Object sender, EventArgs e){



  // ツールバーを生成

  Toolbar bar1 = new Toolbar();



  // ツールバーにメニュー項目を追加

  bar1.Items.Add(new Cut());

  bar1.Items.Add(new Copy());

  bar1.Items.Add(new Paste());

  bar1.Items.Add(new Delete());

  bar1.Items.Add(new ToolbarSeparator());

  bar1.Items.Add(new Undo());

  bar1.Items.Add(new Redo());



  // ツールバーを生成

  Toolbar bar2 = new Toolbar();



  // InsertHtmlMenuに新規のオプションを追加

  InsertHtmlMenu htmlMenu = new InsertHtmlMenu();

  htmlMenu.Items.Add(new ToolbarListItem("My1", "<b>WINGS</b>"));

  htmlMenu.Items.Add(new ToolbarListItem("My2", "<u>WebDeli</u>"));

  bar2.Items.Add(htmlMenu);



  // FreeTextBoxコントロールに2つのツールバーを追加

  ftb.Toolbars.Add(bar1);

  ftb.Toolbars.Add(bar2);

}

</script>

<html>

<body>

<form runat="Server">

<FTB:FreeTextBox id="ftb" runat="Server" Language="ja-JP"

  ToolbarStyleConfiguration="Office2003"

  AutoGenerateToolbarsFromString="false" />

</form>

</body>

</html>

コードから動的に生成する例（C#版：ftb_tool3_cs.aspx）

<%@ Page ContentType="text/html" Language="VB" validateRequest="false" %>

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls"

  Assembly="FreeTextBox" %>

<script runat="Server">

Sub Page_Load(sender As Object, e As EventArgs)



  // ツールバーを生成

  Dim bar1 As New Toolbar()



  // ツールバーにメニュー項目を追加

  bar1.Items.Add(New Cut())

  bar1.Items.Add(New Copy())

  bar1.Items.Add(New Paste())

  bar1.Items.Add(New Delete())

  bar1.Items.Add(New ToolbarSeparator())

  bar1.Items.Add(New Undo())

  bar1.Items.Add(New Redo())



  // ツールバーを生成

  Dim bar2 As New Toolbar()



  // InsertHtmlMenuに新規のオプションを追加

  Dim htmlMenu As New InsertHtmlMenu()

  htmlMenu.Items.Add(New ToolbarListItem("My1", "<b>WINGS</b>"))

  htmlMenu.Items.Add(New ToolbarListItem("My2", "<u>WebDeli</u>"))

  bar2.Items.Add(htmlMenu)



  // FreeTextBoxコントロールに2つのツールバーを追加

  ftb.Toolbars.Add(bar1)

  ftb.Toolbars.Add(bar2)

End Sub

</script>

<html>

<body>

<form runat="Server">

<FTB:FreeTextBox id="ftb" runat="Server" Language="ja-JP"

  ToolbarStyleConfiguration="Office2003"

  AutoGenerateToolbarsFromString="false" />

</form>

</body>

</html>

コードから動的に生成する例（VB.NET版：ftb_tool3_vb.aspx）

　ツールバーはToolBarクラス、セパレータはToolbarSeparatorクラス、リスト・オプションはToolbarListItemクラス、そして、個々のメニュー項目は先ほど挙げた機能名と同名のクラスで、それぞれ表すことができる（いずれのクラスもFreeTextBoxControls名前空間のコントロールである）。ツールバーにメニュー項目を追加するには、ToolbarコントロールのItemsプロパティで取得したToolbarItemCollectionオブジェクトのAddメソッドを使用すればよい。また、ここで作成したツールバーは、Toolbarsプロパティで取得したToolbarCollectionオブジェクトのAddメソッドでFreeTextBoxオブジェクトに追加する。

　上記の実行結果として、2の方法と同等の結果が得られれば成功だ。

カテゴリ：Webフォーム　処理対象：FreeTextBox
使用ライブラリ：FreeTextBoxコントロール（FreeTextBoxControls名前空間）
使用ライブラリ：ImageGalleryコントロール（FreeTextBoxControls名前空間）
使用ライブラリ：Toolbarコントロール（FreeTextBoxControls名前空間）
使用ライブラリ：ToolbarSeparatorコントロール（FreeTextBoxControls名前空間）
使用ライブラリ：InsertHtmlMenuコントロール（FreeTextBoxControls名前空間）
使用ライブラリ：ToolbarListItemコントロール（FreeTextBoxControls名前空間）
使用ライブラリ：ToolbarItemCollectionクラス（FreeTextBoxControls.Support名前空間）
使用ライブラリ：ToolbarCollectionクラス（FreeTextBoxControls.Support名前空間）
関連TIPS：［ASP.NET］FreeTextBoxコントロールでリッチな入力ボックスを作成するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET］FreeTextBoxコントロールでリッチな入力ボックスを作成するには？
		［ASP.NET AJAX］EditorコントロールでWebページにWYSIWYGなテキストエリアを設置するには？
		［ASP.NET AJAX］Editorコントロールの見栄えをカスタマイズするには？
		Visual Studioのメニューやツールバーをカスタマイズするには？
		コントロールをWindowsフォームの中央に正確に配置するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT

［ASP.NET］FreeTextBox上のツールバーをカスタマイズするには？

1. ToolbarLayout属性から指定する方法

2. 配下のサーバ・コントロールから指定する方法

3. コードから動的に生成する方法

注目のテーマ

Insider.NET 記事ランキング

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】