How to Customize Color Picker in ASP.NET Core DOCX Editor
27 Aug 20262 minutes to read
ASP.NET Core DOCX Editor (Document Editor) provides options to customize the color picker using colorPickerSettings in DocumentEditorSettings. 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 for the DOCX Editor as well.
<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true height="590px"></ejs-documenteditorcontainer>
<script>
var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
</script>public ActionResult Default()
{
return View();
}The following table illustrates all the possible properties for the color picker.
| Property | Behavior |
|---|---|
| columns | It is used to render the Color Picker palette with the specified number of columns. Defaults to 10 columns. |
| disabled | It is used to enable or disable the Color Picker component. If it is disabled, the Color Picker popup will not open. Defaults to false. |
| mode | It is used to render the Color Picker with the specified mode (Picker or Palette). Defaults to Picker. |
| modeSwitcher | It is used to show or hide the mode switcher button of the Color Picker component. Defaults to true. |
| showButtons | It is used to show or hide the control buttons (apply or cancel) of the Color Picker component. Defaults to true. |
According to the Word document specifications, it is not possible to modify the predefined highlight colors. This means that the range of highlight colors provided by default cannot be customized or expanded. Users must work with the existing color palette, as no functionality currently exists to modify these predefined highlighting options.
Online demo
Explore how to customize the color picker in the ASP.NET Core DOCX Editor for formatting Word documents in this live ASP.NET Core Color Picker Customization demo.