.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の方法と同等の結果が得られれば成功だ。End of Article

カテゴリ: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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH