デフォルトのコンストラクターは、ToolbarDialogButtonType.CustomボタンとしてToolBarDialogButtonを作成および初期化します。
'-------------------- ' 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>