DialogContentID プロパティ

'--------------------
' 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>