Customizing the DevExpress HTML Editor Toolbar in ASP.NET MVC 18.2
A Comprehensive Guide to Adding Bold, Forecolor Picker, Font Size Dropdown, and Separators
Key Takeaways
- Customization Flexibility: DevExpress HTML Editor offers extensive options to tailor the toolbar, enhancing user interaction and functionality.
- Step-by-Step Configuration: Following a structured approach ensures seamless integration of bold button, forecolor picker, font size dropdown, and separators.
- Enhanced User Interface: A well-organized toolbar improves content editing efficiency and overall user experience.
Introduction
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.
Prerequisites
Before diving into the customization process, ensure the following prerequisites are met:
- DevExpress Installation: Ensure that DevExpress components are installed and properly integrated into your ASP.NET MVC project.
- ASP.NET MVC Project: An existing ASP.NET MVC application where the DevExpress HTML Editor will be customized.
- Basic Knowledge: Familiarity with C#, Razor syntax, and ASP.NET MVC framework.
- Version Compatibility: This guide specifically applies to DevExpress HTML Editor version 18.2.
Step 1: Initialize the DevExpress HTML Editor
Begin by adding the DevExpress HTML Editor to your Razor view. This involves configuring the editor's basic settings before customizing the toolbar.
Adding the HTML Editor to the Razor View
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.
Step 2: Customize the Toolbar
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.
Configuring the Toolbar Items
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:
- Clearing Existing Toolbars: Starts with a clean slate by removing default toolbar items.
- Adding Bold Button: Utilizes the built-in
Boldcommand to allow users to bold text. - Inserting Separators: Uses the
Separatortype to create visual divisions between toolbar items. - ForeColor Picker: Adds a color picker enabling users to change the text color.
- Font Size Dropdown: Provides a dropdown with predefined font sizes for consistency and ease of use.
- Additional Settings: Enables image resizing and table operations for a more robust editing experience.
Step 3: Adding Custom CSS for Enhanced Toolbar Styling
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.
Step 4: Handling Client-Side Events (Optional)
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.
Implementing JavaScript for Font Size Dropdown
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.
Step 5: Testing the Customized Toolbar
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.
Verifying Toolbar Functionality
-
Bold Button: Select text and click the bold button to verify that the text becomes bold.
-
ForeColor Picker: Change the text color using the forecolor picker and ensure the selected color is applied.
-
Font Size Dropdown: Select different font sizes from the dropdown and confirm that the text size updates accordingly.
-
Separators: Ensure that separators are correctly positioned between toolbar items, providing clear visual distinctions.
Perform these tests across different browsers and devices to guarantee consistent behavior and appearance.
Conclusion
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.
References
Last updated January 21, 2025