Ithy Logo

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

devexpress html editor toolbar customization

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 Bold command to allow users to bold text.
  • Inserting Separators: Uses the Separator type 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
Ask me more