.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 | やり直し |
印刷 | |
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属性の指定例である。
|
|
ToolbarLayout属性を使用した例(ftb_tool1.aspx) |
このサンプル・プログラムを実行すると、以下のようなテキストボックスが表示される。指定したアイコンがツールバーに並んでいるのが分かる。
ToolbarLayout属性で機能を指定したサンプル・プログラム(ftb_tool1.aspx)の実行結果 |
2. 配下のサーバ・コントロールから指定する方法
ToolbarLayout属性は、確かにツールバーのレイアウトをカスタマイズするときには手軽な方法だ。しかし、例えばInsertHtmlMenu機能(HTMLの挿入)のように、オプション・リスト(メニューで表示される項目のリスト)を追加しなければ意味のない機能を有効化しようとした場合、ToolbarLayout属性では指定できないという問題がある。あくまでToolbarLayout属性は簡易なツールバー・カスタマイズの手段ととらえるべきだろう。
オプション指定を含むツールバーの追加を行いたい場合には、ツールバーのレイアウトをFreeTextBoxコントロール配下のサーバ・コントロールで定義する必要がある。以下のサンプル・プログラムは、それを実際に行った例だ。
|
|
配下のサーバ・コントロールから指定する例(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)を動的なコードに書き換えたものだ。
|
|
コードから動的に生成する例(C#版:ftb_tool3_cs.aspx) |
|
|
コードから動的に生成する例(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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|