Creating a user-friendly and efficient toolbar is paramount for web applications that require text editing capabilities. DevExpress MVC 18.2 offers robust tools to customize toolbars, allowing developers to incorporate essential features such as bold text formatting, color options, font size adjustments, and button separators. This guide provides a step-by-step approach to implementing these customizations, ensuring a seamless and enhanced user experience.
Before diving into toolbar customization, ensure that the DevExpress MVC HTML Editor is correctly set up within your project. This involves referencing the necessary DevExpress libraries and configuring the editor in your ASP.NET MVC project.
@Html.DevExpress().HtmlEditor(settings => {
settings.Name = "htmlEditor";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Pixel(400);
}).GetHtml()
Customizing the toolbar involves adding buttons and controls that allow users to format text according to their preferences. Here's how to integrate bold text formatting, color pickers, and font size selectors into your DevExpress MVC toolbar.
Use the toolbar configuration options provided by DevExpress to add custom items. This includes buttons for bold text, font color selection, font size adjustments, and separators to organize these tools.
@Html.DevExpress().HtmlEditor(settings => {
settings.Name = "htmlEditor";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Pixel(400);
// Enable toolbar customization
settings.ToolbarConfig.Visible = true;
// Add Font Selector
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Font";
item.Type = HtmlEditorToolbarItemType.Font;
});
// Add Font Size Selector
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Font_Size";
item.Type = HtmlEditorToolbarItemType.FontSize;
});
// Add Bold Button
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Bold";
item.Type = HtmlEditorToolbarItemType.Bold;
});
// Add Separator
settings.ToolbarConfig.Items.Add(item => {
item.Type = HtmlEditorToolbarItemType.Separator;
});
// Add Font Color Picker
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Text_Color";
item.Type = HtmlEditorToolbarItemType.FontColorPicker;
});
// Add Background Color Picker
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Background_Color";
item.Type = HtmlEditorToolbarItemType.BackgroundColorPicker;
});
}).GetHtml()
Enhance the visual appeal of the toolbar by applying custom CSS styles. This ensures that the toolbar integrates seamlessly with the overall design of your web application.
.dxHTMLEditor .dx-toolbar {
background-color: #f4f4f4;
border-bottom: 1px solid #ccc;
}
.ddHTMLEditor .dx-toolbar .dx-toolbar-item {
margin: 0 5px;
}
.dxHTMLEditor .dx-toolbar .bold-icon {
background-image: url('/Images/bold-icon.png');
}
.dxHTMLEditor .dx-toolbar .font-color-icon {
background-image: url('/Images/font-color-icon.png');
}
.dxHTMLEditor .dx-toolbar .font-size-icon {
background-image: url('/Images/font-size-icon.png');
}
.dxHTMLEditor .dx-toolbar .separator {
border-right: 1px solid #ccc;
margin: 0 10px;
height: 20px;
}
To ensure interactivity, handle client-side events associated with the toolbar items. This allows for dynamic responses to user actions, such as applying bold formatting or changing font sizes.
function handleCommandExecuted(s, e) {
if (e.commandName === 'Bold') {
// Logic to toggle bold formatting
} else if (e.commandName === 'FontSize') {
// Logic to change font size
} else if (e.commandName === 'FontColor') {
// Logic to change font color
}
}
Associate the event handler with the HTML Editor:
settings.ClientSideEvents.CommandExecuted = "handleCommandExecuted";
Button separators are essential for organizing toolbar items into logical groups, enhancing the usability and readability of the toolbar. Here's how to implement separators effectively.
Incorporate separators between different groups of toolbar items to create a clear distinction. This can be achieved by adding items of type Separator
in the toolbar configuration.
settings.ToolbarConfig.Items.Add(item => {
item.Type = HtmlEditorToolbarItemType.Separator;
});
Customize the appearance of separators to match the overall design of your toolbar. This ensures that the separators are both functional and aesthetically pleasing.
.dxHTMLEditor .dx-toolbar .separator {
border-right: 1px solid #ccc;
margin: 0 10px;
height: 20px;
}
To extend the functionality of the toolbar beyond the default capabilities, implement custom JavaScript event handlers. These handlers can execute specific actions when toolbar items are interacted with.
function onCustomizeMenuActions(s, e) {
// Add Bold button
e.Actions.push({
text: "Bold",
imageClassName: "bold-icon",
click: function () {
document.execCommand('bold', false, null);
}
});
// Add Font Color button
e.Actions.push({
text: "Font Color",
imageClassName: "font-color-icon",
click: function () {
// Logic to change font color
}
});
// Add Font Size button
e.Actions.push({
text: "Font Size",
imageClassName: "font-size-icon",
click: function () {
// Logic to change font size
}
});
// Add a separator
e.Actions.push({
isSeparator: true
});
}
Ensure that this function is referenced in the HTML Editor configuration:
settings.ClientSideEvents.CustomizeMenuActions = "onCustomizeMenuActions";
The following example demonstrates a complete server-side configuration for customizing the DevExpress MVC HTML Editor toolbar with bold text, color options, font size selectors, and button separators.
@Html.DevExpress().HtmlEditor(settings => {
settings.Name = "customHtmlEditor";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Pixel(500);
// Enable toolbar customization
settings.ToolbarConfig.Visible = true;
// Add Font Selector
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Font";
item.Type = HtmlEditorToolbarItemType.Font;
});
// Add Font Size Selector
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Font_Size";
item.Type = HtmlEditorToolbarItemType.FontSize;
});
// Add Bold Button
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Bold";
item.Type = HtmlEditorToolbarItemType.Bold;
});
// Add Separator
settings.ToolbarConfig.Items.Add(item => {
item.Type = HtmlEditorToolbarItemType.Separator;
});
// Add Font Color Picker
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Text_Color";
item.Type = HtmlEditorToolbarItemType.FontColorPicker;
});
// Add Background Color Picker
settings.ToolbarConfig.Items.Add(item => {
item.Name = "Background_Color";
item.Type = HtmlEditorToolbarItemType.BackgroundColorPicker;
});
// Define client-side events
settings.ClientSideEvents.CommandExecuted = "handleCommandExecuted";
settings.ClientSideEvents.CustomizeMenuActions = "onCustomizeMenuActions";
}).GetHtml()
Implement client-side JavaScript to handle interactions with the toolbar items. This ensures that user actions are appropriately processed and reflected in the editor.
function handleCommandExecuted(s, e) {
switch(e.commandName) {
case 'Bold':
console.log("Bold command executed");
break;
case 'FontSize':
console.log("Font size changed");
break;
case 'FontColor':
console.log("Font color changed");
break;
case 'BackgroundColor':
console.log("Background color changed");
break;
}
}
function onCustomizeMenuActions(s, e) {
// Custom actions can be added here if needed
}
Apply additional CSS styles to refine the appearance of the toolbar, ensuring consistency with the application's theme.
.customHtmlEditor .dx-toolbar {
background-color: #ffffff;
border-bottom: 2px solid #e0e0e0;
}
.customHtmlEditor .dx-toolbar .dx-toolbar-item {
margin: 0 8px;
}
.customHtmlEditor .dx-toolbar .bold-icon {
background-image: url('/Images/custom-bold-icon.png');
}
.customHtmlEditor .dx-toolbar .font-color-icon {
background-image: url('/Images/custom-font-color-icon.png');
}
.customHtmlEditor .dx-toolbar .font-size-icon {
background-image: url('/Images/custom-font-size-icon.png');
}
.customHtmlEditor .dx-toolbar .separator {
border-right: 1px solid #d0d0d0;
margin: 0 12px;
height: 24px;
}
Ensure that the customized toolbar aligns with the overall design language of your application. Consistent styling enhances user familiarity and reduces the learning curve.
Organize toolbar items logically, placing the most frequently used tools in easily accessible positions. Use separators to group related functionalities, improving usability and accessibility.
Customize the toolbar to be responsive across different devices and screen sizes. This includes adjusting button sizes and ensuring that tooltips or labels are clear and concise.
After customization, rigorously test the toolbar to ensure that all functionalities work as intended. Check for compatibility across different browsers and devices to guarantee a seamless user experience.
Customizing the DevExpress MVC 18.2 toolbar to include bold text formatting, color options, font size selectors, and button separators significantly enhances the functionality and user experience of your web application. By following the step-by-step guide provided, developers can implement a tailored toolbar that not only meets user needs but also aligns with the application's design aesthetic. Proper styling, event handling, and adherence to best practices ensure that the customized toolbar is both functional and visually appealing.