［ASP.NET AJAX］Editorコントロールの見栄えをカスタマイズするには？［3.5、C#、VB］

.NET TIPS

［ASP.NET AJAX］Editorコントロールの見栄えをカスタマイズするには？［3.5、C#、VB］

山田祥寛
2009/07/09

　「TIPS：［ASP.NET AJAX］EditorコントロールでWebページにWYSIWYGなテキストエリアを設置するには？」で見たように、Editorコントロールではリッチなテキスト・コンテンツを作成するために、標準でさまざまな機能が有効になっている。

　しかし、場合によっては、ここまでの機能は必要ない、もしくは、そもそも使える機能を制限したい、ということもあるだろう。このような場合、Editorコントロールではツールバーの表示をカスタマイズすることもできる。

　以下に、さっそく具体的な手順を見ていくことにしよう。

1. Editorクラスをオーバライドする

　Editorコントロールの実体は、Editorクラス（AjaxControlToolkit.HTMLEditor名前空間）である。よって、Editorコントロールの挙動のカスタマイズは、Editorクラスを継承して、出力にかかわるメソッドをオーバライドすることで可能だ。

　ツールバーの出力にかかわるメソッドは、FillTopToolbar／FillBottomToolbarの2つである。前者はエディタ上部の、後者は下部のツールバーを出力するためのメソッドである。

　以下では、これら2つのメソッドをオーバライドして、上部のツールバーには装飾関連のボタンと文字色、フォント・サイズを設定するためのボタンを、そして、下部のツールバーにはデザイン／HTMLモードを切り替えるためのボタンを、それぞれ表示するようにしてみよう。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using AjaxControlToolkit.HTMLEditor.ToolbarButton;



namespace Samples {

  // Editorクラスを継承したMyEditorクラスを定義

  public class MyEditor : AjaxControlToolkit.HTMLEditor.Editor {

    // エディタ上部のツールバーを設定する

    protected override void FillTopToolbar() {

      TopToolbar.Buttons.Add(new Bold());

      TopToolbar.Buttons.Add(new Italic());

      TopToolbar.Buttons.Add(new Underline());

      TopToolbar.Buttons.Add(new HorizontalSeparator());

      var fore = new FixedForeColor();

      var foreSel = new ForeColorSelector();

      // 前景色の適用ボタンと前景色の選択ボタン（カラーパレット）を

      // 関連付け

      fore.ID = "fore";

      foreSel.FixedColorButtonId = "fore";

      TopToolbar.Buttons.Add(fore);

      TopToolbar.Buttons.Add(foreSel);


      TopToolbar.Buttons.Add(new HorizontalSeparator());



      // フォントサイズを設定するための選択ボックスを追加

      var size = new FontSize();

      var opts = size.Options;

      opts.Add(new SelectOption {Text = "", Value = ""});

      opts.Add(new SelectOption {Text = "8pt", Value = "8pt"});

      opts.Add(new SelectOption {Text = "10pt", Value = "10pt"});

      opts.Add(new SelectOption {Text = "12pt", Value = "12pt"});

      opts.Add(new SelectOption {Text = "14pt", Value = "14pt"});


      TopToolbar.Buttons.Add(size);

      TopToolbar.Buttons.Add(new HorizontalSeparator());

    }



    // エディタ下部のツールバーを設定する

    protected override void FillBottomToolbar() {

      BottomToolbar.Buttons.Add(new DesignMode());

      BottomToolbar.Buttons.Add(new HtmlMode());

    }

  }

}

Imports Microsoft.VisualBasic

Imports AjaxControlToolkit.HTMLEditor.ToolbarButton



Namespace Samples

  ' Editorクラスを継承したMyEditorクラスを定義

  Public Class MyEditor : Inherits AjaxControlToolkit.HTMLEditor.Editor

    ' エディタ上部のツールバーを設定する

    Protected Overrides Sub FillTopToolbar()

      TopToolbar.Buttons.Add(New Bold())

      TopToolbar.Buttons.Add(New Italic())

      TopToolbar.Buttons.Add(New Underline())

      TopToolbar.Buttons.Add(New HorizontalSeparator())

      Dim fore As New FixedForeColor()

      Dim foreSel As New ForeColorSelector()

      ' 前景色の適用ボタンと前景色の選択ボタン（カラーパレット）を

      ' 関連付け

      fore.ID = "fore"

      foreSel.FixedColorButtonId = "fore"

      TopToolbar.Buttons.Add(fore)

      TopToolbar.Buttons.Add(foreSel)


      TopToolbar.Buttons.Add(New HorizontalSeparator())



      ' フォントサイズを設定するための選択ボックスを追加

      Dim size As New FontSize()    

      Dim opts = size.Options

      opts.Add(New SelectOption() With {.Text = "", .Value = ""})

      opts.Add(New SelectOption() With {.Text = "8pt", .Value = "8pt"})

      opts.Add(New SelectOption() With {.Text = "10pt", .Value = "10pt"})

      opts.Add(New SelectOption() With {.Text = "12pt", .Value = "12pt"})

      opts.Add(New SelectOption() With {.Text = "14pt", .Value = "14pt"})


      TopToolbar.Buttons.Add(size)

      TopToolbar.Buttons.Add(New HorizontalSeparator())

    End Sub



    ' エディタ下部のツールバーを設定する

    Protected Overrides Sub FillBottomToolbar()

      BottomToolbar.Buttons.Add(New DesignMode())

      BottomToolbar.Buttons.Add(New HtmlMode())

    End Sub

  End Class

End Namespace

ツールバーの表示をカスタマイズするためのクラス定義（上：MyEditor.cs、下：MyEditor.vb）

囲み部分は後述の（1）（2）の説明に対応する。

　ツールバーにボタンを追加するには、TopToolBar.Buttons.Addメソッド、またはBottomToolbar.Buttons.Addメソッドで、追加したいコントロールのインスタンスを追加するだけだ。

　追加できるコントロールの種類については、オブジェクト・ブラウザからAjaxControlToolkit.HTMLEditor.ToolbarButton名前空間配下のコントロールを確認してみるとよいだろう。

オブジェクト・ブラウザ（AjaxControlToolkit.HTMLEditor.ToolbarButton名前空間配下のクラスを確認）

　ボタンの追加そのものは、ごく直観的に行えるが、特筆すべき点もいくつかある。以下に、ポイントだけを押さえておこう。

（1）色適用のボタンと選択ボタンとを関連付ける

　ここでは、前景色の適用／選択ボタンをツールバーに追加している。適用ボタンとはエディタ上で選択されたテキストに現在の色を適用するためのボタン、選択ボタンとはカラーパレットをポップアップし、色そのものを選択するためのボタンである。

　通常、これらボタンは通常セットで利用されるべきものであり、あらかじめ互いに関連付けておく必要がある。関連付ける方法は簡単、選択ボタン（ForeColorSelectorクラス）のFixedColorButtonIdプロパティに、適用ボタン（FixedForeColorクラス）のID値を設定するだけだ。

（2）選択ボックスにオプションを追加する

　ここではFontSizeクラスでフォントサイズ選択のための選択ボックスを指定している。選択ボックスにオプションを追加するには、SelectOptionオブジェクトをFontSize.Options.Addメソッドで追加していけばよい。オプションの値と表示テキストは、それぞれSelectOptionオブジェクトのValueプロパティとTextプロパティで設定できる。

　なお、作成したコードは、アプリケーション・ルート直下の「App_Code」フォルダに配置しておく必要がある。

2. 新規のWebフォームを作成する

　それでは、カスタマイズしたEditorコントロール（MyEditorコントロール）の挙動を確認してみよう。

　新規のWebフォーム（MyEditor.aspx）を作成したら、コード・エディタから次の太字部分のようにコードを追加してみよう。

<%@ Page Language="VB" %>

<%@ Register TagPrefix="Wings" Namespace="Samples" %>

  ……中略……

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="manager" runat="server">

</asp:ScriptManager>

<Wings:MyEditor runat="server" id="hedit" />

</div>

</form>

自作のMyEditorコントロールを利用するためのコード（MyEditor.aspx）

　自作のコントロール（カスタム・コントロール）を利用する場合には、@Registerディレクティブでコントロールを有効化する必要がある。Namespace属性でカスタム・コントロールが属する名前空間を、そして、TagPrefix属性はカスタム・コントロールの接頭辞を、それぞれ宣言する。TagPrefix属性の値は、ページ内で一意でさえあれば任意に決めることができる。

　これによって、ページ内でSamples名前空間に属するカスタム・コントロールを「<Wings:～ />」というタグで呼び出すことができるようになった。そのほか、id、runat属性が必須である点は、一般的なサーバ・コントロールと変わりない。

　ここまでを理解できたら、サンプル・アプリケーションを起動し、カスタマイズされたEditorコントロールの挙動を確認してみよう。

サンプルの実行結果

自分で追加したボタンだけがツールバーに表示されている。

　上の画面のように、MyEditorクラスで定義されたボタンだけがツールバーに表示されていることが確認できれば成功である。

利用可能バージョン：.NET Framework 3.5
カテゴリ：Webフォーム　処理対象：ASP.NET AJAX
使用ライブラリ：ScriptManagerコントロール
使用ライブラリ：Editorコントロール
使用TIPS：［ASP.NET AJAX］EditorコントロールでWebページにWYSIWYGなテキストエリアを設置するには？

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

		［ASP.NET AJAX］EditorコントロールでWebページにWYSIWYGなテキストエリアを設置するには？
		［ASP.NET AJAX］JavaScriptからEditorコントロールを生成するには？
		［ASP.NET］DataGridコントロールの列にボタンを表示するには？
		［ASP.NET］FreeTextBox上のツールバーをカスタマイズするには？
		［ASP.NET］FreeTextBoxコントロールでリッチな入力ボックスを作成するには？

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

generated by

「.NET TIPS」

TechTargetジャパン

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

新人プログラマーのためのInsider.NETの歩き方 2012 （2012/5/22）
　晴れて.NETプログラマーとなる新人が効率的に開発技術を習得するには？大量にある記事群の中から新人が読むべきお勧めを厳選して紹介
jQuery MobileでJavaScriptプログラミング （2012/5/17）
　jQuery Mobileは手軽なだけでなく、JavaScriptのAPIも充実しており、独自機能の実装もできる。今回は「グローバル設定」と「イベント」を解説
Windows上で開発するための開発環境構築入門 （2012/5/16）
　Windowsを使ってチームで開発している？なのにサーバOSを設定・運用した経験がない？そうなら、今すぐ学ぼう
「コントラクト」でアプリのサンドボックスを乗り越える！ （2012/5/11）
　Metroスタイル・アプリはサンドボックスの中で動作する。それを乗り越えてほかのアプリと連携する仕組み「コントラクト」を解説

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

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

- PR -

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial

＠IT Special ヘ

ソリューションFLASH

＠ITトップ｜Insider.NETフォーラムトップ｜会議室｜利用規約｜プライバシーポリシー｜サイトマップ

Copyright(c) 2000-2012 ITmedia Inc.
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。