The DevExpress HTML Editor is a powerful tool integrated into ASP.NET MVC applications, providing users with a rich text editing experience. Customizing the toolbar of the HTML Editor enhances its functionality and aligns it with the specific needs of your application. This guide provides a detailed, step-by-step approach to customizing the toolbar in DevExpress HTML Editor version 18.2, focusing on adding a bold button, forecolor picker, font size dropdown, and separators to organize these tools effectively.
Before diving into the customization process, ensure the following prerequisites are met:
Begin by adding the DevExpress HTML Editor to your Razor view. This involves configuring the editor's basic settings before customizing the toolbar.
In your Razor view (e.g., Index.cshtml
), initialize the HTML Editor using the DevExpress helper method.
@Html.DevExpress().HtmlEditor(settings => {
settings.Name = "customHtmlEditor";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Pixel(300);
}).GetHtml()
This code initializes the HTML Editor with a specified name, width, and height. The GetHtml()
method renders the editor in the view.
After initializing the HTML Editor, the next step involves customizing its toolbar to include the desired tools: bold button, forecolor picker, font size dropdown, and separators.
Modify the toolbar settings within the HTML Editor configuration to add the necessary toolbar items.
@Html.DevExpress().HtmlEditor(settings => {
settings.Name = "customHtmlEditor";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Pixel(300);
settings.ToolbarMode = DevExpress.Web.ASPxHtmlEditor.HtmlEditorToolbarMode.Menu;
settings.Toolbars(toolbars => {
toolbars.Clear(); // Remove existing toolbars to start fresh
toolbars.Add(toolbar => {
// Adding Bold Button
toolbar.Items.Add(item => {
item.Name = "bold";
item.Text = "Bold";
item.CommandName = "Bold";
});
// Adding Separator
toolbar.Items.Add(item => {
item.Name = "separator1";
item.Type = DevExpress.Web.ASPxHtmlEditor.HtmlEditorToolbarItemType.Separator;
});
// Adding ForeColor Picker
toolbar.Items.Add(item => {
item.Name = "foreColor";
item.Text = "ForeColor";
item.CommandName = "ForeColor";
});
// Adding Another Separator
toolbar.Items.Add(item => {
item.Name = "separator2";
item.Type = DevExpress.Web.ASPxHtmlEditor.HtmlEditorToolbarItemType.Separator;
});
// Adding Font Size Dropdown
toolbar.Items.Add(item => {
item.Name = "fontSize";
item.Text = "Font Size";
item.CommandName = "FontSize";
item.DisplayMode = DevExpress.Web.ASPxHtmlEditor.HtmlEditorToolbarItemDisplayMode.DropDown;
item.ToolTip = "Font Size";
item.Items.Add("8pt", "8pt");
item.Items.Add("10pt", "10pt");
item.Items.Add("12pt", "12pt");
item.Items.Add("14pt", "14pt");
item.Items.Add("18pt", "18pt");
item.Items.Add("24pt", "24pt");
item.Items.Add("36pt", "36pt");
});
});
});
// Additional settings for enhanced functionality
settings.SettingsEditing.AllowResizeImages = true;
settings.SettingsEditing.AllowTableOperations = true;
}).GetHtml()
The above code performs the following actions:
Bold
command to allow users to bold text.Separator
type to create visual divisions between toolbar items.To ensure that the customized toolbar aligns with your application's theme and provides a visually appealing interface, custom CSS can be applied.
Add the following CSS to your site's stylesheet (e.g., Site.css
):
/* Styling for the DevExpress HTML Editor Toolbar */
.dx-htmleditor-toolbar {
background-color: #f8f9fa;
border: 1px solid #ced4da;
}
.dx-htmleditor-toolbar .dx-button {
color: #495057;
}
.dx-htmleditor-toolbar .dx-dropdownbutton {
color: #495057;
}
/* Hover Effects */
.dx-htmleditor-toolbar .dx-button:hover,
.dx-htmleditor-toolbar .dx-dropdownbutton:hover {
background-color: #e2e6ea;
}
/* Active State */
.dx-htmleditor-toolbar .dx-button.dx-state-active,
.dx-htmleditor-toolbar .dx-dropdownbutton.dx-state-active {
background-color: #dae0e5;
}
This CSS enhances the toolbar's appearance by setting background colors, border styles, text colors, and hover/active state effects, ensuring a cohesive and user-friendly interface.
For advanced functionality, such as dynamically updating the font size or applying custom behaviors when a user interacts with the toolbar, client-side scripting can be utilized.
Add the following JavaScript function to handle changes in the font size dropdown:
// JavaScript function to handle font size changes
function onFontSizeChanged(s, e) {
var selectedFontSize = s.GetSelectedItem().value;
HtmlEditor.PerformCallback("FontSize:" + selectedFontSize);
}
// Register the client-side event in the HTML Editor configuration
settings.Toolbars(toolbars => {
toolbars.Clear();
toolbars.Add(toolbar => {
// ... existing toolbar items ...
// Modify Font Size Dropdown to include the client-side event
toolbar.Items.Add(item => {
item.Name = "fontSize";
item.Text = "Font Size";
item.CommandName = "FontSize";
item.DisplayMode = DevExpress.Web.ASPxHtmlEditor.HtmlEditorToolbarItemDisplayMode.DropDown;
item.ToolTip = "Font Size";
item.Items.Add("8pt", "8pt");
item.Items.Add("10pt", "10pt");
item.Items.Add("12pt", "12pt");
item.Items.Add("14pt", "14pt");
item.Items.Add("18pt", "18pt");
item.Items.Add("24pt", "24pt");
item.Items.Add("36pt", "36pt");
item.ClientSideEvents.SelectedIndexChanged = "onFontSizeChanged";
});
});
});
This script ensures that whenever a user selects a different font size from the dropdown, the chosen size is applied to the selected text within the HTML Editor.
After configuring the toolbar and applying the necessary styles and scripts, it's essential to test the HTML Editor to ensure that all toolbar items function as intended.
Perform these tests across different browsers and devices to guarantee consistent behavior and appearance.
Customizing the DevExpress HTML Editor toolbar in an ASP.NET MVC 18.2 application enables developers to tailor the editing experience to specific requirements. By adding essential tools like the bold button, forecolor picker, font size dropdown, and separators, the toolbar becomes more functional and user-friendly. This comprehensive guide provided a step-by-step approach to achieve this customization, ensuring that each component is seamlessly integrated and styled to align with the application's overall design.
Remember to test the customized toolbar thoroughly to validate its functionality and appearance across different environments. With these customizations in place, users will benefit from an enhanced text editing interface that meets their needs effectively.