バージョン

WebHtmlEditor クライアント側イベント

クライント側イベント

以下のイベントは、WebHtmlEditor コントロールによってサポートされているクライアント側イベントです。

注: クライアント側イベントのほとんどがキャンセル可能です。 Before イベントが特に重要です。 イベントをキャンセルするには、ハンドラーで true を返します。 Before イベントに関連するサーバー側でハンドルされたイベントがある場合、クライアント側イベントで true を返すとサーバー側でイベントをトリガーするためのポストバックもキャンセルされます。

クライアント側イベントのプロパティ

AfterAction

このイベントは、ツールバー アクションの発生後に発生します。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。 actID

アクションの ID。これはツールバー項目のキー(設定されている場合)またはツールバー項目のタイプが可能です。 oEvent

イベント引数。これはポストバックをキャンセルまたは発生するために使用できます。 p4

高度な使用に限定されるパラメータ。これは null または異なるイベントではコンテンツは異なる場合があります。このパラメータが現在使用されているエディタの将来のバージョンで同様に使用されるかどうかの保証はありません。 p5

p4 と同じ p6

p4 と同じ p7

p4 と同じ p8

p4 と同じ

解説

以下の例は使用されるイベントを示しています。


BeforeAction

このイベントは、ツールバー アクションの発生前に発生します。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。 actID

アクションの ID。これはツールバー項目のキー(設定されている場合)またはツールバー項目のタイプが可能です。 oEvent

イベント引数。これはポストバックをキャンセル、ポストバックを発生、またはパラメータを修正するために使用できます。 p4

高度な使用に限定されるパラメータ。これは null または異なるイベントではコンテンツは異なる場合があります。このパラメータが現在使用されているエディタの将来のバージョンで同様に使用されるかどうかの保証はありません。 p5

p4 と同じ p6

p4 と同じ p7

p4 と同じ p8

p4 と同じ

解説

例 1:

例 2:

Blur

このイベントは、エディタがフォーカスを失うと発生します。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。

解説

以下の例は使用されるイベントを示しています。


Focus

このイベントは、エディタがフォーカスを得ると発生します。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。

解説

以下の例は使用されるイベントを示しています。


Initialize

このイベントは javascript オブジェクトが作成および初期化された後で発生します。このイベントはエディタを変更/構成するために使用できます。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。

解説

例 1:

例 2:
{ // MyDialogID の html 要素コンテナへの参照を見つけます。 // この値は ToolbarDialogButton.Dialog.DialogContentID に設定されました  var dialog = document.getElementById("MyDialogID");  if(!dialog)  return; // MyDialog の html 要素コンテンツの参照を見つけます。 // その ID を持つ html 要素が、aspx 内で作成されました。  var content = document.getElementById("MyDialogContentID"); // テンポラリ コンテナから MyDialogContentID を削除し(asxp ページの本文) // WebHtmlEditor によって使用される MyDialogID コンテナにそれを挿入します。  content.parentNode.removeChild(content);  dialog.appendChild(content); // 最初の非表示状態を元に戻します。  content.style.display = "";  content.style.visibility = "visible";  } // この関数はカスタム ダイアログ MyDialogContentID に配置されているボタンによって呼び出されます。 // オブジェクト(ここでは SPAN)をビルドして現在選択されている WebHtmlEditor に挿入します。  function myDialogButtonClick2(message)  {  var object = document.createElement("SPAN");  var style = object.style;  style.border = "2px solid red";  style.background = "cyan";  style.fontFamily = "verdana";  style.fontStyle = "italic";  style.fontSize = "10pt";  style.padding = "5px";  object.innerHTML = "This is SPAN with message '"  + message + "' from MyDialog";  iged_closePop();  if(typeof iged_insNodeAtSel == "function")  iged_insNodeAtSel(object);  else  iged_insText(object.outerHTML);  } // この関数はカスタム ダイアログ MyDialogContentID に配置されているボタンによって呼び出されます。 // テキストをビルドして現在選択されている WebHtmlEditor に挿入します。  function myDialogButtonClick1(message)  {  var field = document.getElementById("myDialogEditField");  var text = field ? field.value : "Error: Can not find myDialogEditField.";  text = "Message from dialog '" + message + "',  where value of field='" + text + "'";  iged_closePop();  iged_insText(text);  } </script> <div id="MyDialogContentID" style="padding:10px;width:360px;height:220px;border:2px  solid #80A0C0;background:#E0F0F0;display:none;visibility:hidden;">     <span style="font-family:verdana;font-size:8pt;margin-top:13px;      margin-left:50px;">Enter text:</span>     <input id="myDialogEditField" value="default text" />     <br /><br />     <span >      Note: if you set focus to field, then old selection in WebHtmlEditor      can be lost (mostly under IE) and text can be inserted at the beginning,      rather than at the last position of caret (selection)</span>     <br />     <input type="button"      value="Click To Insert Text into WebHtmlEditor"      onclick="myDialogButtonClick1('MyDialog')" />     <br />     <input type="button"      value="Click To Insert Object (SPAN)"      onclick="myDialogButtonClick2('MyDialog')" /> </div> <ighedit:WebHtmlEditor id="WebHtmlEditor1" runat="server">     <Toolbar>         <ighedit:ToolbarDialogButton runat="server" type="Custom">             <Dialog DialogContentid="MyDialogID" InternalDialogtype="Text" />         </ighedit:ToolbarDialogbutton>     </Toolbar>     <ClientSideEvents Initialize="WebHtmlEditor1_Initialize" /> </ighedit:WebHtmlEditor>

KeyDown

エディタがブラウザのキーダウン イベントを取得する時に、このイベントが発生します。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。 keyCode

ブラウザ イベントの KeyCode。 oEvent

イベント引数。これはイベントをキャンセルまたはポストバックを発生するために使用できます。

解説

以下の例は使用されるイベントを示しています。


KeyPress

エディタがブラウザのキープレス イベントを取得する時に、このイベントが発生します。

パラメータ

oEditor

WebHtmlEditor を表す javascript オブジェクトへの参照。 keyCode

ブラウザ イベントの KeyCode。 oEvent

イベント引数。これはイベントをキャンセルまたはポストバックを発生するために使用できます。

解説

例 1:

例 2: