aspnet-8197-components-html-editor-examples-how-to-implement-a-custom-preview-popup.md
The following example illustrates how to implement a custom Preview popup.
function onCloseUp() {
previewPopup.RefreshContentUrl();
}
function onCustomCommand(commandName) {
if (commandName == "Preview") {
previewPopup.Show();
window.setTimeout("setHtmlInPreviewIFrame()", 800);
}
}
function setHtmlInPreviewIFrame() {
var previewIFrameElement = getFrameByIFrameElement(previewPopup.GetContentIFrame());
var previewIFrameDoc = null;
if (previewIFrameElement.document)
previewIFrameDoc = previewIFrameElement.document;
else
previewIFrameDoc = previewIFrameElement.contentDocument
previewIFrameDoc.body.innerHTML = ASPxHtmlEditor1.GetHtml();
}
function getFrameByIFrameElement(iframeElement) {
var name = (new Date()).toString();
iframeElement.contentWindow.name = name;
var frameIndex = getFrameByWindowName(name);
return window.frames[frameIndex];
}
function getFrameByWindowName(name) {
var count = window.top.frames.length;
for (var i = 0; i < count; i++) {
if (window.top.frames[i].window.name === name)
return i;
}
return -1;
}
<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server" ...>
...
<Toolbars>
...
</Toolbars>
<ClientSideEvents CustomCommand="function(s, e) { onCustomCommand(e.commandName); }" />
</dx:ASPxHtmlEditor>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
ClientInstanceName="previewPopup" Modal="True" Height="340px"
Width="724px" AllowDragging="True" HeaderText="Preview"
PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
ContentUrl="~/PreviewDocument.htm" AllowResize="True"
FooterText="Resize window" ShowFooter="True">
<ClientSideEvents CloseUp="function(s, e) { onCloseUp(); }" />
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>