.NET TIPS

［ASP.NET AJAX］JavaScriptからEditorコントロールを生成するには？［3.5、C#、VB］

山田 祥寛
2009/07/02

　「TIPS：［ASP.NET AJAX］EditorコントロールでWebページにWYSIWYGなテキストエリアを設置するには？」で紹介したように、Editorコントロールを使うことで、文字列を修飾したり、リンクや個条書きリストを含んだリッチなテキスト・コンテンツをブラウザ上から簡単に編集したりできるようになる。

　このような入力インターフェイスをサーバ・コントロールのドラッグ＆ドロップひとつで有効にできるのはASP.NETのうれしいところであるが、ときとしてサーバ・コントロールを使えない環境で、Editorコントロールの恩恵にあずかりたいということもあるだろう。

　例えば、1.0がリリースされたばかりのASP.NET MVCでは、ビュー・スクリプトでサーバ・コントロールを使わないのが基本である。また、JavaやPHP（PHP：Hypertext Preprocessor）のような非.NET環境でリッチな入力インターフェイスを使いたいということもあるかもしれない。

　Editorコントロールは、このような状況にも対応できるよう、クライアントサイド・スクリプトだけでEditorコントロールを有効にするためのインターフェイスを備えている。本稿は、その方法について解説するものだ。

　それではさっそく、具体的な手順を見ていこう。なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

［注意］Editorコントロールの対応バージョン

Editorコントロールは、2009年5月付でリリースされたVersion 3.0.30512で新たに追加されたサーバ・コントロールだ。古いバージョンを使用している場合には、必ず3.0.30512以上のバージョンに置き換える必要がある。

1. 必要なリソースをアプリケーションにコピーする

　ASP.NET AJAX Control Toolkit（以降、Control Toolkit）のパッケージに含まれるサンプル・アプリケーションには、Editorコントロールの動作に必要なJavaScriptファイルやスタイルシート、画像ファイルなどのリソースがすべて含まれている。まずは、これらのファイル一式を自分のアプリケーションにコピーしておく。コピーすべきサンプル・アプリケーションのファイルの在りかは、次のとおりである。

  • SampleWebSite/HTMLEditor/OtherSamples/Scripts
  • SampleWebSite/HTMLEditor/OtherSamples/AjaxControlToolkit/3.0.20820.16598\3.0.20820.0

　これらフォルダ配下にあるJavaScriptファイル（.jsファイル）を、自分のアプリケーション・フォルダ配下の「Scripts」フォルダにコピーする。また、「Css」「Images」フォルダは、そのままアプリケーション・フォルダ配下にコピーする。これから作成しようとしているHTMLEditor.htmlに対して、以下の画面のようなフォルダ構造ができるイメージである。

必要なファイルを配置した後のフォルダ構造

　フォルダ構造は必ずしもこのままでなくて構わないが、その場合は、適宜、コード中のパスを書き換える必要があるので注意されたい。

2. 新規の.htmlページを作成する

　新規の.htmlページとしてHTMLEditor.htmlを作成する。HTMLEditor.htmlのレイアウト部分は次のようなコードである。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>HTMLEditorコントロール</title>
  <script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>
  <script src="Scripts/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>
  <script src="Scripts/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>
  <script src="Scripts/AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js" type="text/javascript"></script>
  <script src="Scripts/AjaxControlToolkit.HTMLEditor.ClientSideEditor.js" type="text/javascript"></script>
  <link href="Css/Editor.css" rel="stylesheet" type="text/css" />  ……
</head>
<body>
<form>
  <textarea id="hedit" cols="35" rows="20"></textarea>
  <input type="button" value="送信" />
</form>  ……
</body>
</html>
HTMLEditor.htmlのレイアウト部分のコード

　Editorコントロールを有効にするには、関係するJavaScriptファイルとスタイルシートをインポートしておく必要がある（）。リストのように<script>、<link>タグを追加しておこう。<script>、<link>タグはコード・エディタから直接にタイプしても構わないが、ソリューション・エクスプローラから.jsファイルや.cssファイルをドラッグ＆ドロップすることでコードを自動生成することもできる。このように、インポートすべきファイルの数が多い場合には、こちらの方法を利用するとよいだろう。

　また、で、Editorコントロールの基となるテキストエリア（<textarea>タグ）を追加しておこう。

3. Editorコントロールを初期化する

　次に、Editorコントロールを初期化するためのクライアントサイド・スクリプトを追加する。

……省略……
</form>
<script type="text/javascript">

// initイベント・ハンドラを登録
Sys.Application.add_init(
  function() {
    // Editorコントロールを生成
    $create(AjaxControlToolkit.HTMLEditor.ClientSideEditor,
      {
        imagesPath: "Images/",
        popupCss: "Css/AttachedTemplatePopup.css",
        designPanelCss: "Css/DesignPanel.css",
        documentCss: "Css/Document.css"
      },
      null, null,
      $get("hedit")
    );
  }
);
</script>
</body>
Editorコントロールを有効にするためのコード（HTMLEditor.html）

　Sys.Applicationオブジェクトのadd_initメソッドは、initイベントに対応するイベント・ハンドラを登録するためのもの。initイベントは、すべてのスクリプトが呼び出された後、オブジェクトが初期化される「前」に発生する。ここでは、このinitイベント・ハンドラの中で、Editorコントロールを生成しているわけだ。

　コントロールを生成するのは、Microsoft AJAX Library（以降、MS AJAX Lib）で公開している「$createショートカット関数」の役割だ*。$create関数の一般的な構文は以下のとおり。

*　$create関数は、Sys.Component.createメソッドのエイリアス（別名）である。

$create(
   コンポーネントの型
  [, プロパティ情報（名前／値のハッシュ）
  [, イベント・ハンドラ情報（名前／ハンドラのハッシュ）
  [, ほかのコンポーネントへの参照
  [, コンポーネントを関連付けるターゲット要素]]]]
)
$create関数の構文

　コンポーネントの型は、コントロールの種類によって決まっているが、Editorコントロールを利用する場合には「AjaxControlToolkit.HTMLEditor.ClientSideEditor」と指定すればよい。

　イベント・ハンドラ情報、ほかのコンポーネントへの参照については、ここでは特に使用していないのでnull値を、ターゲット要素には先ほど用意しておいたテキストエリアへの参照を指定しておこう。

　そして、プロパティ情報には、Editorコントロールの初期化に必要なパラメータ（プロパティ）をハッシュ形式で指定する。指定可能なプロパティは次のとおりである。

プロパティ 概要
activeMode デフォルトの編集モード
autoFocus 編集時に自動的にエディタにフォーカスするか
content デフォルトのコンテンツ
width エディタの幅
height エディタの高さ
imagesPath エディタの描画に必要な画像フォルダへのパス
popupCss ポップアップ・ウィンドウに適用するスタイルシートのパス
designPanelCss デザイン／プレビューモードでのコンテンツに適用するスタイルシートのパス
documentCss デザイン／プレビューモードでのコンテンツに適用するスタイルシートのパス
Editorコントロールで使用可能なプロパティ（クライアントサイド）

　ほとんどのプロパティは、サーバサイドからアクセスできるものと同様であることがお分かりいただけると思う。ただし、プロパティ名の先頭文字が小文字である点に注意してほしい。

4. Editorコントロールの内容を取得する

　最後に、Editorコントロールで入力された内容を取得し、ダイアログ表示するためのJavaScriptのコードを追加する。

<script type="text/javascript">
  function disp() {
    var hedit = $find('hedit');
    window.alert(hedit.get_content());
  }
</script>
</head>
Editorコントロールの内容を取得するためのJavaScriptのコード

　$find関数は、先ほどの$create関数同様、MS AJAX Libで提供されるショートカット関数の1つで、ページ上のコントロール（ここでは、AjaxControlToolkit.HTMLEditor.ClientSideEditorオブジェクト）を検索するための機能を提供するものだ。$find関数の引数には、コントロールのID値を指定すればよい。

　ClientSideEditorオブジェクトを取得できたら、あとはそのcontentプロパティにアクセスするだけだ。これでEditorコントロールに入力された値にアクセスできる。

　サンプルを実行して、以下の画面のような結果が得られれば成功である。

サンプルの実行結果（HTMLEditor.html）

　なお、Editorコントロールの内容にアクセスするために、テキストエリアの値を直接参照しても期待する値は取得できないので、注意されたい。End of Article

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

この記事と関連性の高い別の.NET TIPS
［ASP.NET AJAX］EditorコントロールでWebページにWYSIWYGなテキストエリアを設置するには？
［ASP.NET AJAX］Editorコントロールの見栄えをカスタマイズするには？
［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？
［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？
［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム 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