このダイアログが定義済みのHtmlBoxDialogである場合（つまり、コンポーネント内で作成されたすべてのHtmlBoxDialogsの場合）、このプロパティは、ダイアログのコンテンツを含む非表示のHTML要素を参照します。ダイアログが動作しなくなるので、定義済みのダイアログの値を変更しないでください。カスタムダイアログを作成する場合、このプロパティを使用できますが、ダイアログのコンテンツを提供するためにこのプロパティの代わりにHtmlBoxDialog.Textプロパティを使用することを推奨します。
'-------------------- ' Note: custom buttons with all their properties can be created within aspx. ' That would reduce size of hidden viewstate field and improve persistance of properties. ' To generate toolbar items at visual design,- the editor for Toolbar property can be used. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If (Me.IsPostBack) Then Return End If '------------------- ' Add a button with custom dialog which is defined in aspx. Dim myDialogButton As ToolbarDialogButton = New ToolbarDialogButton() myDialogButton.Key = "MyDialogButtonKey" myDialogButton.Type = ToolbarDialogButtonType.Custom Dim dialog As HtmlBoxDialog = myDialogButton.Dialog dialog.Caption = "This is my dialog" '------------------- ' Note: the html element with id "MyDialogID" should exist within asxp. ' Note: to connect dialog-content with its container, application ' should process ClientSideEvents.Initialize. dialog.DialogContentID = "MyDialogID" dialog.Key = "MyDialogKey" dialog.TitlebarBackColor = System.Drawing.Color.Orange dialog.TitlebarFontSize = FontUnit.Point(12) Me.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton) '------------------- ' Add a button with custom dialog which is defined by the Dialog.Text property. Dim myDialogButton2 As ToolbarDialogButton = New ToolbarDialogButton() myDialogButton2.Key = "MyDialogButton2Key" myDialogButton2.Type = ToolbarDialogButtonType.Custom Dim dialog2 As HtmlBoxDialog = myDialogButton2.Dialog dialog2.Caption = "My Dialog 2" dialog2.Text = "Enter value:<input id='myDialog2Input' value='value from Dialog2' /><p></p><input type='button' onclick='myDialog2Click()' value='Click to insert text' /><script type='text/javascript'>function myDialog2Click(){iged_getById('WebHtmlEditor1').insertAtCaret(document.getElementById('myDialog2Input').value);}</script>" dialog2.Key = "MyDialog2Key" Me.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton2) End Sub To connect DialogContentID with content of dialog (html elements in aspx), an application should process <ClientSideEvents Initialize="WebHtmlEditor1_Initialize" /> event. Codes below should appear within the HEAD section of HTML. <script type="text/javascript"><!-- //---------------- // That function is called when WebHtmlEditor1 was initialized. function WebHtmlEditor1_Initialize(oEditor) { initializeMyDialog(); } //---------------- // That function is called by WebHtmlEditor1_Initialize in order to // initialize content of custom dialog, which is defined explicitly within aspx var myDialogWasConnected = false; function initializeMyDialog() { if(myDialogWasConnected) return; myDialogWasConnected = true; //---------------- // Find reference to html-element container for MyDialogID. // That value was set to ToolbarDialogButton.Dialog.DialogContentID var dialog = document.getElementById("MyDialogID"); if(!dialog) return; //---------------- // Find reference to html-element content for MyDialog. // The html element with that id was created within aspx. var content = document.getElementById("MyDialogContentID"); //---------------- // Remove MyDialogContentID from its temporary container (body of asxp-page) // and insert it into MyDialogID container, which is used by WebHtmlEditor. content.parentNode.removeChild(content); dialog.appendChild(content); //---------------- // Undo initial hidden state. content.style.display = ""; content.style.visibility = "visible"; } //---------------- // That function is called by a button located in custom dialog MyDialogContentID. // Build some object (here SPAN) and insert it into WebHtmlEditor at current selection. 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"; //var oEditor = iged_getById("WebHtmlEditor1"); //---------------- // Close drop-down (dialog). iged_closePop(); //---------------- // Insert object (html element) into WebHtmlEditor at caret location. if(typeof iged_insNodeAtSel == "function")//Mozilla iged_insNodeAtSel(object); else//IE iged_insText(object.outerHTML); } //---------------- // That function is called by a button located in custom dialog MyDialogContentID. // Build some text and insert it into WebHtmlEditor at current selection. 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 + "'"; //var oEditor = iged_getById("WebHtmlEditor1"); //---------------- // Close drop-down (dialog). iged_closePop(); //---------------- // Insert text into WebHtmlEditor at caret location. iged_insText(text); } // --> </script>
//-------------------- // Note: custom buttons with all their properties can be created within aspx. // That would reduce size of hidden viewstate field and improve persistance of properties. // To generate toolbar items at visual design,- the editor for Toolbar property can be used. protected void Page_Load(object sender, EventArgs e) { if(this.IsPostBack) return; //------------------- // Add a button with custom dialog which is defined in aspx ToolbarDialogButton myDialogButton = new ToolbarDialogButton(); myDialogButton.Key = "MyDialogButtonKey"; myDialogButton.Type = ToolbarDialogButtonType.Custom; HtmlBoxDialog dialog = myDialogButton.Dialog; dialog.Caption = "This is my dialog"; //------------------- // Note: the html element with id "MyDialogID" should exist within asxp // Note: to connect dialog-content with its container, application // should process ClientSideEvents.Initialize. dialog.DialogContentID = "MyDialogID"; dialog.Key = "MyDialogKey"; dialog.TitlebarBackColor = System.Drawing.Color.Orange; dialog.TitlebarFontSize = FontUnit.Point(12); this.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton); //------------------- // Add a button with custom dialog which is defined by the Dialog.Text property. ToolbarDialogButton myDialogButton2 = new ToolbarDialogButton(); myDialogButton2.Key = "MyDialogButton2Key"; myDialogButton2.Type = ToolbarDialogButtonType.Custom; HtmlBoxDialog dialog2 = myDialogButton2.Dialog; dialog2.Caption = "My Dialog 2"; dialog2.Text = "Enter value:<input id='myDialog2Input' value='value from Dialog2' /><p></p><input type='button' onclick='myDialog2Click()' value='Click to insert text' /><script type='text/javascript'>function myDialog2Click(){iged_getById('WebHtmlEditor1').insertAtCaret(document.getElementById('myDialog2Input').value);}</script>"; dialog2.Key = "MyDialog2Key"; this.WebHtmlEditor1.Toolbar.Items.Add(myDialogButton2); } To connect DialogContentID with content of dialog (html elements in aspx), an application should process <ClientSideEvents Initialize="WebHtmlEditor1_Initialize" /> event. Codes below should appear within the HEAD section of HTML. <script type="text/javascript"><!-- //---------------- // That function is called when WebHtmlEditor1 was initialized. function WebHtmlEditor1_Initialize(oEditor) { initializeMyDialog(); } //---------------- // That function is called by WebHtmlEditor1_Initialize in order to // initialize content of custom dialog, which is defined explicitly within aspx var myDialogWasConnected = false; function initializeMyDialog() { if(myDialogWasConnected) return; myDialogWasConnected = true; //---------------- // Find reference to html-element container for MyDialogID. // That value was set to ToolbarDialogButton.Dialog.DialogContentID var dialog = document.getElementById("MyDialogID"); if(!dialog) return; //---------------- // Find reference to html-element content for MyDialog. // The html element with that id was created within aspx. var content = document.getElementById("MyDialogContentID"); //---------------- // Remove MyDialogContentID from its temporary container (body of asxp-page) // and insert it into MyDialogID container, which is used by WebHtmlEditor. content.parentNode.removeChild(content); dialog.appendChild(content); //---------------- // Undo initial hidden state. content.style.display = ""; content.style.visibility = "visible"; } //---------------- // That function is called by a button located in custom dialog MyDialogContentID. // Build some object (here SPAN) and insert it into WebHtmlEditor at current selection. 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"; //var oEditor = iged_getById("WebHtmlEditor1"); //---------------- // Close drop-down (dialog). iged_closePop(); //---------------- // Insert object (html element) into WebHtmlEditor at caret location. if(typeof iged_insNodeAtSel == "function")//Mozilla iged_insNodeAtSel(object); else//IE iged_insText(object.outerHTML); } //---------------- // That function is called by a button located in custom dialog MyDialogContentID. // Build some text and insert it into WebHtmlEditor at current selection. 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 + "'"; //var oEditor = iged_getById("WebHtmlEditor1"); //---------------- // Close drop-down (dialog). iged_closePop(); //---------------- // Insert text into WebHtmlEditor at caret location. iged_insText(text); } // --> </script>