ASP.NET 徹底活用術(Part2)のホームへ戻る

HTML形式のサポート (blogAdd2.aspx)

 

智恵袋に新規データを入力するとき、重要な箇所にマーカーを付けたり表や図を入力したいことがあります。ここでは、TextBoxの代わりにFreeTextBoxを利用して新規データをHTML形式で入力できるように改善します。

 

FreeTextBoxを利用するための前準備

 

FreeTextBoxのダウンロード

FreeTextBoxを利用するには、以下のサイトからFreeTextBox 3.1.1をダウンロードします。

 

http://www.freetextbox.com/

 

ダウンロードが完了すると、「FTBv3-1-1.zip」が作成されますのでLhaplusなどのツールを利用して解凍します。FTBv3-1-1フォルダを展開すると、サブフォルダが表示されますのでFramework-1.1フォルダを展開してFreetextBox.dllをコピーしたらVS.NET 2003のソリューションエクスプローラのbinフォルダ(※)に貼り付けします。

 

binフォルダが表示されていないときは、ソリューションエクスプローラのコマンドバーから[すべてのファイルを表示]のボタンをクリックします。

 

図9: FTBv3-1-1.zipを解凍するとサブフォルダが展開される

 

 

10binフォルダにFreetextBox.dllをコピー

 

 

FreetextBox.dllを参照設定に追加

ソリューションエクスプローラの[参照設定]の右クリックから[参照の追加]を選択します。「参照の追加」が表示されたら、[参照]ボタンをクリックします。

 

「コンポーネントの選択」が表示されたらbinフォルダに格納されている[FreetextBox.dll]を選択して[開く]ボタンをクリックします。「参照の追加」に戻ったら[OK]をクリックしてダイアログを閉じます。ソリューションエクスプローラの「参照設定」に[FreetextBox]が表示されます。

 

11:「参照設定」にbinフォルダに格納されているFreetextBox.dllを追加

 

 

Web.configファイル編集

 

VS.NET のソリューションエクスプローラから[Web.config]をダブルクリックします。Web.configの内容が表示されたら、<system.web>…</system.web>セクションに以下の<httHandleres>…</httpHandleres>を追加します。

 

<httpHandlers>

 <add verb="GET" path="FtbWebResource.axd"

    type="FreeTextBoxControls.AssemblyResourceHandler, FreeTextBox" />

</httpHandlers>

 

 

TextBoxFreetextBoxと置換

 

blogAdd.aspxHTMLビューで表示したら表(table)2行目に配置されているTextBox(txtDescription)FreeTextBox(ftbDescription)と置換します。

 

<TR>

  <TD vAlign="top">内容</TD>

  <TD>

    <FTB:FreeTextBox id="ftbDescription" runat="Server"

      Width="600px" Height="250px" Language="ja-JP"

      ToolbarStyleConfiguration="Office2003" />

  </TD>

</TR>

 

次に、@Pageディレクティブに「ValidateRequest="False"」を追加します。

 

<%@ Page Language="vb" ValidateRequest="False" AutoEventWireup="false" … %>

 

さらに、@Pageディレクティブの直後に以下の@Registerディレクティブを追加します。

 

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>

 

最後に、[保存]ボタンのクリック時のイベントハンドラを以下のように書き換えて、FreetextBoxから内容を取得するようにします。

 

Private Sub btnSave_Click(・・・) Handles btnSave.Click

  Dim strTitle As String = txtTitle.Text

  Dim strDescription As String = ftbDescription.Text

  Dim strCategories As String = ViewState("Categories")

  InsertBlog(strTitle, strDescription, strCategories)

End Sub

 

FreetextBoxのコマンドバーからは、見出しを選択して<h1><h2><h3>タグ埋め込んだり、フォント、サイズ、前景色を設定することができます。また、ブラウザに表示されている表(table)、図などをコピー&貼り付けしてFreetextBoxに表示させることもできます。FreetextBoxの最下位から[HTML]タブをクリックすると、直接HTMLタグを記述して編集することもできます。

 

12WebページにTextBoxの代わりにFreetextBoxが表示された

 

ASP.NET 徹底活用術(Part2)のホームへ戻る