ASP.NET MVC で FreeTextBox を使う！

ASP.NET MVC のビューで、リッチテキストエディタ ( Rich Text Editor ) を実装したい、といった場合、どんな選択肢があるだろう?

有名どころでは、FCKEditor や TinyMCE、といったところか。jQuery ベースなら、jWYSIWYG というのもあるらしい。そのほかにも YUI など、選択肢はよりどりみどりといったところか。

とこで、ASP.NET でリッチテキストエディタコントロールと言えば、FreeTextBox もかなり有名ではなかろうか。

しかしながら、当然のごとく、FreeTextBox は ASP.NET のサーバーコントロールなので、ASP.NET MVC のビューでは使えない。

...そのままでは。

そう。

実は、ちょっと細工を施せば、FreeTextBox を ASP.NET MVC のビューに載せて使うことができる。

つまるところ、ASP.NET MVC は ASP.NET を礎にしているわけであり、そしていわゆる HTML におけるリッチテキストエディタというのは根本的にはクライアント側技術である。
そのため、たとえ FreeTextBox が ASP.NET 用サーバーコントロールであったとしても、 ASP.NET MVC ビュー上で機能させることが可能なのだ。

まずはためしに、ASP.NET MVC のビュー上に、FreeTextBox コントロールを配置して実行してみる。

見たところ、FreeTextBox コントロールのレンダリングは正常に行われているようだ。

しかし、入力フォーカスを受け取らず、ツールバーのボタンも一切反応しない状況。
つまり、どうやら、FreeTextBox の動作に必要なクライアント側スクリプトが一切稼働していない模様だ。

それも道理。
おそらく、ASP.NET MVC のビュー、PageView クラスでは、ClientScript.RegisterStartupScript などの、クライアント側スクリプト注入の処理がことごとく無視されているのではないだろうか。
実際、PageView の造りにおいては、このスクリプトを注入しておいてくれと言われても、どこに注入してよいやら定義できないだろう（非 MVC な ASP.NET における Page クラスのアーキテクチャでは、レンダリングする HTML の構造はすべて Page クラス側で握っていただろうから、何ら問題は無かった）。

ということで、細工としては、FreeTextBox が本来なら自動で注入したはずのクライアント側スクリプトを、手作業で ASP.NET MVC のビューに書き足してやることである。

まず、FreeTextBox 用のクライアント側スクリプトを、外部ファイルとして用意。
FreeTextBox のアーカイブの中に、次の 3つの JavaScript ファイルが収録されているので、これを ASP.NET MVC アプリケーションの適当なサブフォルダ（/Scripts とか?）に配置。

FTB-Utility.js
FTB-FreeTextBox.js
FTB-ToolbarItems.js

次に、ビュー(.aspx) の割と冒頭にて、これら 3つの JavaScript ファイルをインクルードする。

<script type="text/javascript" src="/Scripts/FTB-Utility.js"></script>
<script type="text/javascript" src="/Scripts/FTB-FreeTextBox.js"></script>
<script type="text/javascript" src="/Scripts/FTB-ToolbarItems.js"></script>

そして最後に、ちょっとこれが難関なのだが、非 MVC な ASP.NET の Page (.aspx) に FreeTextBox を配置したときのレンダリング結果の HTML ソースを参考に、次のような JavaScript をビュー(.aspx) の末尾のほうに書き足す。

<script language="JavaScript">
if (window.FTB_AddEvent) {
　FTB_AddEvent(window,'load',function () {
　FTB_API['FreeTextBox1'] = new FTB_FreeTextBox('FreeTextBox1',
　　　true,
　　　false,
　　　new Array(
　　　　new FTB_Button('FreeTextBox1_1_0','bold',null,null,false,null),
　　　　new FTB_Button('FreeTextBox1_1_1','italic',null,null,false,null),
　　　　...

上記のうち、とくに FTB_Button の配列を定義しているあたりは、本来は FreeTextBox サーバーコントロールのプロパティとして指定した内容が動的に生成されたものであるはずなので、ちょっと注意が必要だ。とはいえ、所詮ツールボタンの定義にすぎないので、そんなに理解に苦しむことはないと思われる。
あと、上記例で 'FreeTextBox1～' と書かれている箇所は、実際には FreeTextBox サーバーコントロールの ClientID になるので注意（マスターページ使ってたら、例えば、'ctl00_MainContents_FreeTextBox1～' とかになる）。

以上で、ASP.NET MVC のビューにて、FreeTextBox が動作するようになる。
このビューからの from 送信を受け取るアクションでは、配置した FreeTextBox サーバーコントロールの ClientID 名の form 変数を参照すれば入力内容が手に入る。

なお、アクションに [ValidateRequet(false)] 属性をつけておかないと、FreeTextBox からの HTML タグ混じりの文字列を受け取る際に例外となるので注意。
と、それ以上に注意が必要なのは、 [ValidateRequet(false)] とする以上、XSS 対策を厳重に行うことだ（これは FreeTextBox に限った話ではなく、リッチテキストエディタで入力を受け取り、表示する Web アプリに普遍的な話である）。

ASP.NET MVC のビューでの FreeTextBox の利用、もうちょっとスマートにやるとすれば、外部 JavaScript ファイルを、FreeTextBox.dll に埋め込まれているリソースを参照するようにもできるはず。

さらに言えば、FreeTextBox の JavaScript 注入処理を横取りして、うまいことビューのレンダリングに含めるような、PageView からの派生クラスを作れると思うし、それができれば、上記手順の最後にあった、手作業で script ブロックをゴリゴリ書く手間もなくなって、それこそ Cool だと思う。

まぁ、そこまでして FreeTextBox にこだわる必要もないとは思うが、それまで FreeTextBox に習熟したスキルや投資したカスタムスクリプトを無駄なく ASP.NET MVC でも再利用したいという向きもあるのではなかろうか。

※以上は、FreeTextBox 3.2.1、.NET Framework 3.5 で試してみた。