How to Customize Color Picker in ASP.NET MVC DOCX Editor

27 Aug 20262 minutes to read

DOCX Editor provides an option to customize the color picker using colorPickerSettings in Document Editor settings. The color picker offers customization options for the default appearance by allowing selection between Picker or Palette mode for font and border colors.

Similarly, you can use the documentEditorSettings property with the DocumentEditor control as well.

@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
<script>
    var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
</script>
public ActionResult Default()
{
    return View();
}

The following table illustrates the available properties for the color picker.

Property Behavior
columns Renders the ColorPicker palette with the specified number of columns. Defaults to 10
disabled Enables or disables the ColorPicker component. If disabled, the ColorPicker popup does not open. Defaults to false
mode Renders the ColorPicker in the specified mode. Defaults to ‘Picker’
modeSwitcher Shows or hides the mode switcher button of the ColorPicker component. Defaults to true
showButtons Shows or hides the control buttons (apply / cancel) of the ColorPicker component. Defaults to true

Note: According to the Word document specifications, it is not possible to modify the Predefined Highlight colors. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options.

Online Demo

Explore how to customize the color picker in the ASP.NET MVC DOCX Editor for formatting Word documents in this live demo here.