メモ型のフィールドをHTMLエディタで編集するサンプル
図 メモ型のフィールドをHTMLエディタで編集するサンプル
このサンプルは、Webページに表示されている社員を編集するとき、HTMLエディタで備考（プロフィール）を編集することができます。DataGridから社員を選択して編集ボタンをクリックすると、新規ウィンドウに社員のデータが表示されます。社員の備考を変更するときは、備考の右側に表示されている編集ボタン
をクリックします。
編集ボタンをクリックすると、HTMLエディタが開いて備考が表示されます。HTMLエディタからは、MS-Wordの感覚で文章を編集することができます。たとえば、「合唱」の色を変えるには、文字を選択してからフォントカラーのボタン
をクリックします。「色の設定」ダイアログが表示されますので、色を選択して[OK]ボタンをクリックします。HTMLエディタから保存のボタン
をクリックすると、編集した内容をテキストボックスの備考に上書きします。HTMLエディタを終了するには、ウィンドウの閉じるボタン
をクリックします。
図 「色の設定」ダイアログが表示された例
◆プログラムHtmlEditor.aspxのポイント
¶ポイント１ HTMLエディタ(MSHTML)を組み込むには
このサンプルでは、Internet Explorer 5.5でサポートされたMSHTMLを利用して編集機能を組み込んでいます。編集機能を組み込むには、HTMLタグにcontentEditable属性を追加します。このサンプルでは、<div>タグにcontentEditable属性を追加しています。また、編集機能を組み込むときはCSSのoverflow: autoを指定して、データが表示領域に収まらないとき自動的にスクロールバーを表示させます。
<div id="TextEditor" runat="server"
contentEditable="true"
style="overflow:auto; word-wrap:break-word; height:300;">
</div>
Webページに編集機能を組み込むには、HTML、CSS、JavaScriptの知識が要求されます。マイクロソフトのサイトにMSHTMLを使用してHTMLエディタを開発する手順が解説されていますので、後述するWebLinkを参照してください。
¶ポイント２ JavaScriptをランタイム時に生成して埋め込むには
このサンプルでは、HTMLエディタに編集データを挿入するのにJavaScriptを使用しています。JavaScriptをランタイム時に生成してWebページに埋め込むには、ASP.NETのインライン表現<%=…%>を使用すると便利です。このサンプルでは、Page_Loadイベントで変数mstrInsertScriptにJavaScriptを生成してインライン表現で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では、LabelとTextBoxを定義して社員の備考を表示しています。このTextBoxには、TextModeプロパティにMultiLineを設定して複数行で表示されるようにしています。また、Ro
312: <asp:TextBox id="txtNotes" runat="server"
314: Columns="30"
315: Ro
316: TextMode="MultiLine"
317: />
行318-324のImageButtonでは、編集ボタンを定義しています。このImageButtonには、OnClickイベントを登録しています。OnClickイベントでは、新規ウィンドウを開いてHTMLエディタを表示します。
図 ImageButtonで編集ボタンを表示した例
リスト PopupEmployee.aspxのソースコード(HTML編)
|
219: <html> 307: <asp:Label id="lblNotes" runat="server" 376: </form> |
◆プログラムPopupEmployee.aspxの解説(コード編)
Sub ibtnEdit_Click()イベントの処理
このイベントは、編集ボタンをクリックしたときに発生します。このイベントでは、新規ウィンドウを開くJavaScriptを生成して登録します。
行49では、TextBoxのTextプロパティから備考を取得しています。行50-52では、JavaScriptのwindow.open()メソッドに指定するオプションを生成しています。行54では、Session変数に備考を保存しています。Session変数に保存した備考は、HTMLエディタが使用します。
行55では、OpenWindow()を呼び出して新規ウィンドウを開くJavaScriptを登録します。OpenWindowの引数には、url、target、featuresを指定します。
|
48: Sub ibtnEdit_Click(s As
Object, e As ImageClickEventArgs) 56: End Sub |
Sub OpenWindow()の処理
このサブプロシージャでは、新規ウィンドウを開くJavaScriptを生成して登録します。OpenWindowは、編集ボタンをクリックしたときにOnClickイベントから呼ばれます。
行124-128のWith…End Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。
<script
language='javascript'>
window.open('HtmlEditor.aspx','_blank'," features ");
</script>
JavaScriptのwindow.open()メソッドは、新規ウィンドウを開きます。open()メソッドの引数には、url、target、featuresを指定します。urlには、新規ウィンドウに表示するファイルHtmlEditor.aspxを指定しています。
行129では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録しています。ここで登録したJavaScriptは、Webページがロードされたときにブラウザから実行されます。
|
122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As
String)
|
リスト PopupEmployee.aspxのソースコード(コード編)
|
1: <%@ Page
language="vb" SmartNavigation="False" %> |
◆プログラム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エディタの外枠を定義しています。このtableのstyle=には、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 、onMouseUp、onMouseDown、onMouseOver、onMouseOutイベントが登録されています。onClickイベントは、保存ボタンをクリックしたときに発生します。onClickイベントでは、JavaScriptのSaveHtml()関数を呼び出して、編集したデータを備考のTextBoxに上書きします。
function SaveHtml(){
window.opener.frmPopupEmployee.txtNotes.value = TextEditor.innerHTML;
}
onMouse系のイベントが発生したときは、JavaScriptのbutton_up()、button_down()、button_over()、button_out()関数を呼びます。これらの関数では、CSSのbackgroundColorプロパティと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:'ＭＳ Ｐ明朝'">
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>
・・・ 121: </tr>
・・・ 221: </tr>
・・・ |
◆プログラムHtmlEditor.aspxの解説(コード編)
HtmlEditor.aspxでは、Webページに編集データを挿入するJavaScriptを生成します。
Sub Page_Load()イベントの処理
このイベントは、ページがロードされたときに実行されます。このイベントでは、Session変数に保存されている備考をHTMLエディタに渡すJavaScriptを生成します。
行8では、Seesion変数に保存されている備考を取得しています。行9-12では、ページが最初にロードされたか調べています。ページが最初にロードされたときは、変数mstrInserScriptにJavaScriptを生成して格納します。ここで生成したJavaScriptは、ASP.NETのインライン表現でWebページの最後に挿入します。
<script language="javascript">
TextEditor.innerHTML='備考・・・';
</script>
このJavaScriptは、Webページがロードされたときクライアントのブラウザから実行されます。
リスト HtmlEditor.aspxのソースコード(コード編)
|
1: <%@ Page Language="VB"
Culture="ja-JP" UICulture="ja-JP" %> |
WebLink
|
HTMLエディタを開発するための解説書とサンプルを入手するには マイクロソフトのWebサイトに、MSHTMLを利用してHTMLエディタを開発するための手順が解説されています。このサイトからは、サンプルのHTMLエディタを無償にてダウンロードすることができますので、興味のある方は、参考にしてください。 HTMLエディタは、Webメールの本文をHTML形式で作成するときに利用すると便利です。 http://msdn.microsoft.com/workshop/author/editing/tutorials/html_editor.asp |