How to: Set up a custom font dialog
- 6 minutes to read
This sample is based upon the ideas from sample Implementing custom commands and dialogs. It illustrates how to replace the default ToolbarParagraphFormattingEdit, ToolbarFontNameEdit and ToolbarFontSizeEdit buttons of your ASPxHtmlEditor by a single nice-looking dialog.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-set-up-a-custom-font-dialog-e1934
- CustomFontDialog.ascx.cs
- Default.aspx (C#)
- CustomFontDialog.ascx (C#)
- Default.aspx.cs
- Default.aspx (VB.NET)
- Default.aspx.vb
- CustomFontDialog.ascx (VB.NET)
- CustomFontDialog.ascx.vb
using System;
namespace HtmlEditorCustomFontDialog.UserControls {
public partial class CustomFontDialog : System.Web.UI.UserControl {
protected void Page_Load(object sender, EventArgs e) {
pcCustomFontDialog.PopupElementID = HtmlEditorID;
hf["HtmlEditorID"] = HtmlEditorID;
hf["PopupID"] = pcCustomFontDialog.ClientID;
}
public string HtmlEditorID {
get { return (string)ViewState["HtmlEditorID"]; }
set { ViewState["HtmlEditorID"] = value; }
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HtmlEditorCustomFontDialog._Default" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dxcp" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dxwsc" %>
<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function OnCustomCommand(s, e) {
if(e.commandName == "OpenCustomFontDialog")
OpenCustomFontDialog();
}
function OnBeginCallback(s, e) {
if(window.__customFontDialog)
window.__customFontDialog.Hide();
}
function OpenCustomFontDialog() {
if(!window.__customFontDialogReceived) {
cpCustomFontDialogContainer.PerformCallback();
window.__customFontDialogReceived = true;
} else
OpenCustomFontDialogCore();
}
function OnCustomFontDialogContainerEndCallback(s, e) {
OpenCustomFontDialogCore();
}
function OpenCustomFontDialogCore() {
htmlEditor.SaveSelectionForPopup();
__customFontDialog.Show();
}
</script>
<dxhe:ASPxHtmlEditor ID="heHtmlEditor1" runat="server" ClientInstanceName="htmlEditor">
<ClientSideEvents CustomCommand="OnCustomCommand" BeginCallback="OnBeginCallback" />
<Toolbars>
<dxhe:CustomToolbar>
<Items>
<dxhe:ToolbarBoldButton />
<dxhe:ToolbarItalicButton />
<dxhe:CustomToolbarButton CommandName="OpenCustomFontDialog" ToolTip="Change Font" ViewStyle="Image">
<Image Url="~/i/OpenCustomFontDialog.png" Width="16px" Height="16px" />
</dxhe:CustomToolbarButton>
<dxhe:ToolbarJustifyLeftButton BeginGroup="True" />
<dxhe:ToolbarJustifyCenterButton />
<dxhe:ToolbarJustifyRightButton />
<dxhe:ToolbarJustifyFullButton />
</Items>
</dxhe:CustomToolbar>
</Toolbars>
</dxhe:ASPxHtmlEditor>
<dxcp:ASPxCallbackPanel ID="cpCustomFontDialogContainer" runat="server"
ClientInstanceName="cpCustomFontDialogContainer" OnCallback="OnCustomFontDialogContainerCallback" ShowLoadingPanel="false" Style="z-index: 49999;">
<ClientSideEvents EndCallback="OnCustomFontDialogContainerEndCallback" />
</dxcp:ASPxCallbackPanel>
</div>
</form>
</body>
</html>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomFontDialog.ascx.cs" Inherits="HtmlEditorCustomFontDialog.UserControls.CustomFontDialog" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dxhf" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dxpc" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<script id="dxss_" type="text/javascript">
function __OnOKButtonClick(s, e) {
var htmlEditorID = __GetHiddenField(s).Get("HtmlEditorID");
var htmlEditor = __GetControlByID(htmlEditorID);
htmlEditor.RestoreSelectionForPopup();
var fontSize = __GetEditor(s, "spnFontSize").GetValue();
if(fontSize)
htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTSIZE_COMMAND, fontSize, true /* addToHistory */);
var fontName = __GetEditor(s, "cmbFontName").GetText();
if(fontName)
htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTNAME_COMMAND, fontName, true);
var fontColor = __GetEditor(s, "clrFontColor").GetValue();
if(fontColor)
htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTCOLOR_COMMAND, fontColor, true);
__HideDialog(s);
}
function __OnCancelButtonClick(s, e) {
__HideDialog(s);
}
function __HideDialog(requester) {
var popupID = __GetHiddenField(requester).Get("PopupID")
__GetControlByID(popupID).Hide();
}
function __GetEditor(requester, editorID) {
var editorID = __GetIDPrefix(requester) + editorID;
return __GetControlByID(editorID);
}
function __GetHiddenField(requester) {
var hiddenFieldID = __GetIDPrefix(requester) + "hf";
return __GetControlByID(hiddenFieldID);
}
function __GetIDPrefix(requester) {
return requester.name.substr(0, requester.name.lastIndexOf('_') + 1);
}
function __GetControlByID(controlID) {
return ASPxClientControl.GetControlCollection().Get(controlID);
}
</script>
<dxpc:ASPxPopupControl ID="pcCustomFontDialog" runat="server" ClientInstanceName="__customFontDialog"
PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" HeaderText="Font Settings" PopupAction="None">
<ContentCollection>
<dxpc:PopupControlContentControl runat="server">
<dxhf:ASPxHiddenField ID="hf" runat="server" SyncWithServer="false" />
<table>
<tr>
<td>
Font Name:
</td>
<td>
<dxe:ASPxComboBox ID="cmbFontName" runat="server" Width="170px">
<Items>
<dxe:ListEditItem Text="" />
<dxe:ListEditItem Text="Times New Roman" />
<dxe:ListEditItem Text="Tahoma" />
<dxe:ListEditItem Text="Verdana" />
<dxe:ListEditItem Text="Arial" />
<dxe:ListEditItem Text="MS Sans Serif" />
<dxe:ListEditItem Text="Courier" />
</Items>
</dxe:ASPxComboBox>
</td>
</tr>
<tr>
<td>
Size:
</td>
<td>
<dxe:ASPxSpinEdit ID="spnFontSize" runat="server" MinValue="1" MaxValue="10" Width="170px" />
</td>
</tr>
<tr>
<td>
Color:
</td>
<td>
<dxe:ASPxColorEdit ID="clrFontColor" runat="server" Width="170px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="margin-top: 8px;">
<tr>
<td>
<dxe:ASPxButton ID="btnOK" runat="server" Text="OK" Width="83px"
AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
<ClientSideEvents Click="__OnOKButtonClick" />
</dxe:ASPxButton>
</td>
<td style="padding-left: 4px;">
<dxe:ASPxButton ID="btnCancel" runat="server" Text="Cancel" Width="83px"
AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
<ClientSideEvents Click="__OnCancelButtonClick" />
</dxe:ASPxButton>
</td>
</tr>
</table>
</td>
</tr>
</table>
</dxpc:PopupControlContentControl>
</ContentCollection>
</dxpc:ASPxPopupControl>
using System;
using DevExpress.Web.ASPxClasses;
using DevExpress.Web.ASPxCallbackPanel;
using HtmlEditorCustomFontDialog.UserControls;
namespace HtmlEditorCustomFontDialog {
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
protected void OnCustomFontDialogContainerCallback(object sender, CallbackEventArgsBase e) {
CustomFontDialog dialog = (CustomFontDialog)LoadControl("~/UserControls/CustomFontDialog.ascx");
dialog.HtmlEditorID = heHtmlEditor1.ClientID;
((ASPxCallbackPanel)sender).Controls.Add(dialog);
}
}
}
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="HtmlEditorCustomFontDialog._Default" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dxcp" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dxwsc" %>
<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function OnCustomCommand(s, e) {
if(e.commandName == "OpenCustomFontDialog")
OpenCustomFontDialog();
}
function OnBeginCallback(s, e) {
if(window.__customFontDialog)
window.__customFontDialog.Hide();
}
function OpenCustomFontDialog() {
if(!window.__customFontDialogReceived) {
cpCustomFontDialogContainer.PerformCallback();
window.__customFontDialogReceived = true;
} else
OpenCustomFontDialogCore();
}
function OnCustomFontDialogContainerEndCallback(s, e) {
OpenCustomFontDialogCore();
}
function OpenCustomFontDialogCore() {
htmlEditor.SaveSelectionForPopup();
__customFontDialog.Show();
}
</script>
<dxhe:ASPxHtmlEditor ID="heHtmlEditor1" runat="server" ClientInstanceName="htmlEditor">
<ClientSideEvents CustomCommand="OnCustomCommand" BeginCallback="OnBeginCallback" />
<Toolbars>
<dxhe:CustomToolbar>
<Items>
<dxhe:ToolbarBoldButton />
<dxhe:ToolbarItalicButton />
<dxhe:CustomToolbarButton CommandName="OpenCustomFontDialog" ToolTip="Change Font" ViewStyle="Image">
<Image Url="~/i/OpenCustomFontDialog.png" Width="16px" Height="16px" />
</dxhe:CustomToolbarButton>
<dxhe:ToolbarJustifyLeftButton BeginGroup="True" />
<dxhe:ToolbarJustifyCenterButton />
<dxhe:ToolbarJustifyRightButton />
<dxhe:ToolbarJustifyFullButton />
</Items>
</dxhe:CustomToolbar>
</Toolbars>
</dxhe:ASPxHtmlEditor>
<dxcp:ASPxCallbackPanel ID="cpCustomFontDialogContainer" runat="server"
ClientInstanceName="cpCustomFontDialogContainer" OnCallback="OnCustomFontDialogContainerCallback" ShowLoadingPanel="false" Style="z-index: 49999;">
<ClientSideEvents EndCallback="OnCustomFontDialogContainerEndCallback" />
</dxcp:ASPxCallbackPanel>
</div>
</form>
</body>
</html>
Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Web.ASPxClasses
Imports DevExpress.Web.ASPxCallbackPanel
Imports HtmlEditorCustomFontDialog.UserControls
Namespace HtmlEditorCustomFontDialog
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub OnCustomFontDialogContainerCallback(ByVal sender As Object, ByVal e As CallbackEventArgsBase)
Dim dialog As CustomFontDialog = CType(LoadControl("~/UserControls/CustomFontDialog.ascx"), CustomFontDialog)
dialog.HtmlEditorID = heHtmlEditor1.ClientID
CType(sender, ASPxCallbackPanel).Controls.Add(dialog)
End Sub
End Class
End Namespace
<%@ Control Language="vb" AutoEventWireup="true" CodeBehind="CustomFontDialog.ascx.vb" Inherits="HtmlEditorCustomFontDialog.UserControls.CustomFontDialog" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dxhf" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dxpc" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<script id="dxss_" type="text/javascript">
function __OnOKButtonClick(s, e) {
var htmlEditorID = __GetHiddenField(s).Get("HtmlEditorID");
var htmlEditor = __GetControlByID(htmlEditorID);
htmlEditor.RestoreSelectionForPopup();
var fontSize = __GetEditor(s, "spnFontSize").GetValue();
if(fontSize)
htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTSIZE_COMMAND, fontSize, true /* addToHistory */);
var fontName = __GetEditor(s, "cmbFontName").GetText();
if(fontName)
htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTNAME_COMMAND, fontName, true);
var fontColor = __GetEditor(s, "clrFontColor").GetValue();
if(fontColor)
htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTCOLOR_COMMAND, fontColor, true);
__HideDialog(s);
}
function __OnCancelButtonClick(s, e) {
__HideDialog(s);
}
function __HideDialog(requester) {
var popupID = __GetHiddenField(requester).Get("PopupID")
__GetControlByID(popupID).Hide();
}
function __GetEditor(requester, editorID) {
var editorID = __GetIDPrefix(requester) + editorID;
return __GetControlByID(editorID);
}
function __GetHiddenField(requester) {
var hiddenFieldID = __GetIDPrefix(requester) + "hf";
return __GetControlByID(hiddenFieldID);
}
function __GetIDPrefix(requester) {
return requester.name.substr(0, requester.name.lastIndexOf('_') + 1);
}
function __GetControlByID(controlID) {
return ASPxClientControl.GetControlCollection().Get(controlID);
}
</script>
<dxpc:ASPxPopupControl ID="pcCustomFontDialog" runat="server" ClientInstanceName="__customFontDialog"
PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" HeaderText="Font Settings" PopupAction="None">
<ContentCollection>
<dxpc:PopupControlContentControl runat="server">
<dxhf:ASPxHiddenField ID="hf" runat="server" SyncWithServer="false" />
<table>
<tr>
<td>
Font Name:
</td>
<td>
<dxe:ASPxComboBox ID="cmbFontName" runat="server" Width="170px">
<Items>
<dxe:ListEditItem Text="" />
<dxe:ListEditItem Text="Times New Roman" />
<dxe:ListEditItem Text="Tahoma" />
<dxe:ListEditItem Text="Verdana" />
<dxe:ListEditItem Text="Arial" />
<dxe:ListEditItem Text="MS Sans Serif" />
<dxe:ListEditItem Text="Courier" />
</Items>
</dxe:ASPxComboBox>
</td>
</tr>
<tr>
<td>
Size:
</td>
<td>
<dxe:ASPxSpinEdit ID="spnFontSize" runat="server" MinValue="1" MaxValue="10" Width="170px" />
</td>
</tr>
<tr>
<td>
Color:
</td>
<td>
<dxe:ASPxColorEdit ID="clrFontColor" runat="server" Width="170px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="margin-top: 8px;">
<tr>
<td>
<dxe:ASPxButton ID="btnOK" runat="server" Text="OK" Width="83px"
AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
<ClientSideEvents Click="__OnOKButtonClick" />
</dxe:ASPxButton>
</td>
<td style="padding-left: 4px;">
<dxe:ASPxButton ID="btnCancel" runat="server" Text="Cancel" Width="83px"
AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
<ClientSideEvents Click="__OnCancelButtonClick" />
</dxe:ASPxButton>
</td>
</tr>
</table>
</td>
</tr>
</table>
</dxpc:PopupControlContentControl>
</ContentCollection>
</dxpc:ASPxPopupControl>
Imports Microsoft.VisualBasic
Imports System
Namespace HtmlEditorCustomFontDialog.UserControls
Partial Public Class CustomFontDialog
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
pcCustomFontDialog.PopupElementID = HtmlEditorID
hf("HtmlEditorID") = HtmlEditorID
hf("PopupID") = pcCustomFontDialog.ClientID
End Sub
Public Property HtmlEditorID() As String
Get
Return CStr(ViewState("HtmlEditorID"))
End Get
Set(ByVal value As String)
ViewState("HtmlEditorID") = value
End Set
End Property
End Class
End Namespace