メモ型のフィールドをHTMLエディタで編集するサンプル

 

メモ型のフィールドをHTMLエディタで編集するサンプル

 

このサンプルは、Webページに表示されている社員を編集するとき、HTMLエディタで備考(プロフィール)を編集することができます。DataGridから社員を選択して編集ボタンをクリックすると、新規ウィンドウに社員のデータが表示されます。社員の備考を変更するときは、備考の右側に表示されている編集ボタンをクリックします。

 

編集ボタンをクリックすると、HTMLエディタが開いて備考が表示されます。HTMLエディタからは、MS-Wordの感覚で文章を編集することができます。たとえば、「合唱」の色を変えるには、文字を選択してからフォントカラーのボタンをクリックします。「色の設定」ダイアログが表示されますので、色を選択して[OK]ボタンをクリックします。HTMLエディタから保存のボタンをクリックすると、編集した内容をテキストボックスの備考に上書きします。HTMLエディタを終了するには、ウィンドウの閉じるボタンをクリックします。

 

「色の設定」ダイアログが表示された例

 

◆プログラムHtmlEditor.aspxのポイント

 

 

¶ポイント1 HTMLエディタ(MSHTML)を組み込むには

 

このサンプルでは、Internet Explorer 5.5でサポートされたMSHTMLを利用して編集機能を組み込んでいます。編集機能を組み込むには、HTMLタグにcontentEditable属性を追加します。このサンプルでは、<div>タグにcontentEditable属性を追加しています。また、編集機能を組み込むときはCSSoverflow: autoを指定して、データが表示領域に収まらないとき自動的にスクロールバーを表示させます。

 

<div id="TextEditor" runat="server"

  contentEditable="true"

  style="overflow:auto; word-wrap:break-word; height:300;">

</div>

 

Webページに編集機能を組み込むには、HTMLCSSJavaScriptの知識が要求されます。マイクロソフトのサイトにMSHTMLを使用してHTMLエディタを開発する手順が解説されていますので、後述するWebLinkを参照してください。

 

¶ポイント2 JavaScriptをランタイム時に生成して埋め込むには

 

このサンプルでは、HTMLエディタに編集データを挿入するのにJavaScriptを使用しています。JavaScriptをランタイム時に生成してWebページに埋め込むには、ASP.NETのインライン表現<%=…%>を使用すると便利です。このサンプルでは、Page_Loadイベントで変数mstrInsertScriptJavaScriptを生成してインライン表現でWebページに埋め込んでいます。

 

Sub Page_Load()

  mstrInsertScript = "TextEditor.innerHTML='" & strNotes & "';" & vbCrLf

End Sub

 

<script language="javascript">

<%= mstrInsertScript %>

</script>

 

◆プログラムPopupEmployee.aspxの解説(HTML)

 

PopupEmployee.aspxは、DataGridから選択した社員をTextBoxに表示します。行307-317では、LabelTextBoxを定義して社員の備考を表示しています。このTextBoxには、TextModeプロパティにMultiLineを設定して複数行で表示されるようにしています。また、RowsプロパティとColumnsプロパティに、行数と桁数を設定して表示領域を定義しています。データが表示領域に収まらないときは、自動的にスクロールバーが表示されます。

 

312: <asp:TextBox id="txtNotes" runat="server"
314:   Columns="30"
315:   Rows="4"
316:   TextMode="MultiLine"
317:   />

 

318-324ImageButtonでは、編集ボタンを定義しています。このImageButtonには、OnClickイベントを登録しています。OnClickイベントでは、新規ウィンドウを開いてHTMLエディタを表示します。

 

ImageButtonで編集ボタンを表示した例

 

リスト PopupEmployee.aspxのソースコード(HTML)

219: <html>
225: <body>
226: <form id="frmPopupEmployee" runat="server">
    
・・・

307: <asp:Label id="lblNotes" runat="server"
308:   CssClass="label"
309:   Text="
備考" />
312: <asp:TextBox id="txtNotes" runat="server"
313:   CssClass="textBox"
314:   Columns="30"
315:   Rows="4"
316:   TextMode="MultiLine"
317:   Wrap="True" />
318: <asp:ImageButton id="ibtnEdit" runat="server"
319:   OnClick="ibtnEdit_Click"
320:   ImageUrl="../img/edit.gif"
321:   Title="Editor"
322:   CssClass="imageOn"
323:   Enabled="True"
324:   ImageAlign="Middle" />
    
・・・

376: </form>
377: </body>
377: </html>

 

 

◆プログラムPopupEmployee.aspxの解説(コード編)

 

Sub ibtnEdit_Click()イベントの処理

 

このイベントは、編集ボタンをクリックしたときに発生します。このイベントでは、新規ウィンドウを開くJavaScriptを生成して登録します。

 

49では、TextBoxTextプロパティから備考を取得しています。行50-52では、JavaScriptwindow.open()メソッドに指定するオプションを生成しています。行54では、Session変数に備考を保存しています。Session変数に保存した備考は、HTMLエディタが使用します。

 

55では、OpenWindow()を呼び出して新規ウィンドウを開くJavaScriptを登録します。OpenWindowの引数には、urltargetfeaturesを指定します。

 

 

48: Sub ibtnEdit_Click(s As Object, e As ImageClickEventArgs)
 49:   Dim strNotes As String = txtNotes.Text.Trim()
 50:   Dim strFeatures As String = "height=400,width=555,left=50,top=50," & _
 51:     "dependent=yes,location=no,menubar=no,resizable=yes,scrollbars=no," & _
 52:     "status=no,titlebar=yes,toolbar=no"
 53:
 54:   Session("Notes") = strNotes
 55:   OpenWindow("HtmlEditor.aspx","_blank", strFeatures)

56: End Sub

 

 

Sub OpenWindow()の処理

 

このサブプロシージャでは、新規ウィンドウを開くJavaScriptを生成して登録します。OpenWindowは、編集ボタンをクリックしたときにOnClickイベントから呼ばれます。

 

124-128With…End Withでは、StringBuilderAppend()メソッドで以下のJavaScriptを生成しています。

 

<script language='javascript'>
window.open('HtmlEditor.aspx','_blank'," features ");

</script>

 

JavaScriptwindow.open()メソッドは、新規ウィンドウを開きます。open()メソッドの引数には、urltargetfeaturesを指定します。urlには、新規ウィンドウに表示するファイルHtmlEditor.aspxを指定しています。

 

129では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録しています。ここで登録したJavaScriptは、Webページがロードされたときにブラウザから実行されます。

 

 

122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As String)
123:   Dim sbScript As New StringBuilder()
124:   With sbScript
125:     .Append("<script language='javascript'>" & vbCrLf)
126:     .Append(vbTab & "window.open('" & strUrl & "','" & strTarget & "','" &

strFeatures & "');" & vbCrLf)
127:     .Append("</" & "script>")
128:   End With             
129:   RegisterClientScriptBlock("openWindow", sbScript.ToString)
130: End Sub

 

 

リスト PopupEmployee.aspxのソースコード(コード編)

1: <%@ Page language="vb" SmartNavigation="False" %>
  2: <%@ Import Namespace="System.Data" %>
  3: <%@ Import Namespace="System.Data.OleDb" %>
  4:
  5: <script language="vb" runat="server">
  6: Private mdt As DataTable
  7:
 48: Sub ibtnEdit_Click(s As Object, e As ImageClickEventArgs)
 56: End Sub
 57:
122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As String)
130: End Sub
217: </script>

 

 

◆プログラムHtmlEditor.aspxの解説(HTML)

 

HtmlEditor.aspxでは、HTML<div>タグに編集機能を組み込んでテキストを編集できるようにします。行19<link>には、CSSが定義されている外部ファイルをリンクしています。HTMLエディタが使用するCSSは、すべてこの外部ファイルに定義されています。行20では、<script>src=属性で外部ファイルに格納されているJavaScriptを取り込んでいます。HTMLエディタで使用するJavaScriptは、すべてこの外部ファイルに格納されています。

 

23<body>には、onLoadイベントが登録されています。onLoadイベントは、Webページがロードされたときにクライアントのブラウザ側で実行されます。このイベントでは、WebページのすべてのHTMLタグのunselectable属性にnoを設定しています。ただし、編集機能(contentEditable)を組み込んだHTMLタグは、unselectable属性をoffにします。この初期化を実行しないと、編集するテキストを選択してツールバーからボタンをクリックすると選択したテキストが解除されてしまいます。

 

<body onLoad="doInit">

 

function doInit(){

  for (i=0; i<document.all.length; i++)

    document.all(i).unselectable = "on";

  TextEditor.unselectable = "off";

  TextEditor.focus();

}

 

26-233<table>…</table>では、HTMLエディタの外枠を定義しています。このtablestyle=には、background-colorプロパティにlightgreyを設定していますので、背景色が薄い灰色で表示されます。

 

27-224<tr>…</tr>では、ツールボタンを表示する行を定義しています。行29-122<table>…</table>では、上段のツールボタンを表示する枠を定義しています。行34-38<td>…</td>では、<div><img>タグを使用して保存ボタンを定義しています。

 

<div class="cbtn"

onclick="SaveHtml();"

onmouseup="button_up(this);"

onmousedown="button_down(this);"

onmouseover="button_over(this);"

onmouseout="button_out(this);"

>
<img alt="Save" hspace="1" src="../img/editor/Save.gif"

align="absMiddle" vspace="0" />

</div>

 

divには、onClick onMouseUponMouseDownonMouseOveronMouseOutイベントが登録されています。onClickイベントは、保存ボタンをクリックしたときに発生します。onClickイベントでは、JavaScriptSaveHtml()関数を呼び出して、編集したデータを備考のTextBoxに上書きします。

 

function SaveHtml(){

  window.opener.frmPopupEmployee.txtNotes.value = TextEditor.innerHTML;

}

 

onMouse系のイベントが発生したときは、JavaScriptbutton_up()button_down()button_over()button_out()関数を呼びます。これらの関数では、CSSbackgroundColorプロパティとborderColorプロパティを書き換えてボタンの背景色を変化させています。

 

function button_over(eButton) {

  eButton.style.backgroundColor = "#B5BDD6";

  eButton.style.borderColor = "darkblue darkblue darkblue darkblue";

}

 

function button_out(eButton) {

  eButton.style.backgroundColor = "threedface";

  eButton.style.borderColor = "threedface";

}

 

function button_down(eButton) {

  eButton.style.backgroundColor = "#8494B5";

  eButton.style.borderColor = "darkblue darkblue darkblue darkblue";

}

 

function button_up(eButton) {

  eButton.style.backgroundColor = "#B5BDD6";

  eButton.style.borderColor = "darkblue darkblue darkblue darkblue";

  eButton = null;

}

 

マウスを移動したときに保存ボタンの背景色が変化した例

 

後続する<td>…</td>では、上段に表示するその他のボタンとドロップダウンリストを定義しています。

 

 

ツールボタンの上段を表示した例

 

124-222<table>…</table>では、下段のツールボタンを表示する枠を定義しています。行129-133<td>…</td>では、カットボタンを定義しています。後続する<td>…</td>では、下段に表示するその他のボタンを定義しています。

 

ツールボタンの下段を表示した例

 

 

226-232<tr>…</tr>では、テキストを編集する行を定義しています。行228-230<div>…</div>では、テキストの編集領域を定義しています。<div>に編集機能を組み込むには、contentEditable=属性にtrueを設定します。これで、<div>…</div>内に記述されているテキストが編集可能になります。


228:   <div id="TextEditor" runat="server"
229:     contentEditable="true"

style="overflow: auto;word-wrap:break-word;height:300;font-family:'MS P明朝'">
230:   </div>

235-238<script>…</script>では、編集するテキストを挿入するJavaScriptを生成しています。行236では、インラン表現の<%= …. %>を使用してJavaScriptを生成します。

 

235: <script language="javascript">
236: <%= mstrInsertScript %>
è TextEditor.innerHTML='Text Data'
238: </script>

 

リスト HtmlEditor.aspxのソースコード(HTML)

17: <html>
 18: <head>
 19: <link rel="stylesheet" href="../css/htmlEditor.css" />
 20: <script language="javascript" src="../js/HtmlEditor.js"></script>
 21: </head>
 22:
 23: <body onLoad="doInit">
 24: <form id="frmText" runat="server">
 25:
 26: <table style="background-color:lightgrey;">
 27: <tr class="tblToolbar" bgcolor="buttonface">
 28: <td>
 29:   <table class="raiseme">
 34:   <td>
 35:      <div onmouseup="button_up(this);" class="cbtn"

onmousedown="button_down(this);" onmouseover="button_over(this);"

onclick="SaveHtml();" onmouseout="button_out(this);">
 36:        <img alt="Save" hspace="1" src="../img/editor/Save.gif"

align="absMiddle" vspace="0" />
 37:      </div>
 38:   </td>

       ・・・

121:   </tr>
122:   </table>
123:
124:   <table class="raiseme">
125:   <tr>
129:   <td>
130:     <div onmouseup="button_up(this);" class="cbtn"

*onmousedown="button_down(this);" onmouseover="button_over(this);"

onclick="cmdExec('cut')" onmouseout="button_out(this);">
131:       <img alt="Cut" hspace="1" src="../img/editor/Cut.gif"

align="absMiddle" vspace="0" />
132:     </div>
133:   </td>

       ・・・

221:   </tr>
222:   </table>
223: </td>
224: </tr>
225:
226: <tr>
227: <td>
228:   <div id="TextEditor" runat="server"
229:     contentEditable="true"

style="overflow: auto;word-wrap:break-word;height:300;font-family:'MS P明朝'">
230:   </div>
231: </td>
232: </tr>
233: </table>
234: </center>
235: <script language="javascript">
236: <%= mstrInsertScript %>
238: </script>
239: </form>

・・・
249: </body>
250: </heml>

 

 

◆プログラムHtmlEditor.aspxの解説(コード編)

 

HtmlEditor.aspxでは、Webページに編集データを挿入するJavaScriptを生成します。

 

Sub Page_Load()イベントの処理

 

このイベントは、ページがロードされたときに実行されます。このイベントでは、Session変数に保存されている備考をHTMLエディタに渡すJavaScriptを生成します。

 

8では、Seesion変数に保存されている備考を取得しています。行9-12では、ページが最初にロードされたか調べています。ページが最初にロードされたときは、変数mstrInserScriptJavaScriptを生成して格納します。ここで生成したJavaScriptは、ASP.NETのインライン表現でWebページの最後に挿入します。

 

<script language="javascript">

  TextEditor.innerHTML='備考・・・';

</script>

 

このJavaScriptは、Webページがロードされたときクライアントのブラウザから実行されます。

 

リスト HtmlEditor.aspxのソースコード(コード編)

  1: <%@ Page Language="VB" Culture="ja-JP" UICulture="ja-JP" %>
  2: <%@ Import Namespace="System.IO" %>
  3:
  4: <script runat="server">
  5: Private mstrInsertScript As String = "//"
  6:
  7: Sub Page_Load()
  8:   Dim strNotes As String = Session("Notes")
  9:   If Not IsPostBack Then
 10:     mstrInsertScript = "TextEditor.innerHTML='" & strNotes & "';" & vbCrLf
 12:   End If
 13: End Sub
 15: </script>

 

 

WebLink

HTMLエディタを開発するための解説書とサンプルを入手するには

 

マイクロソフトのWebサイトに、MSHTMLを利用してHTMLエディタを開発するための手順が解説されています。このサイトからは、サンプルのHTMLエディタを無償にてダウンロードすることができますので、興味のある方は、参考にしてください。

 

HTMLエディタは、Webメールの本文をHTML形式で作成するときに利用すると便利です。

 

http://msdn.microsoft.com/workshop/author/editing/tutorials/html_editor.asp

 

 

 

ASP.NET DataGrid3のホームへ戻る