How to Customize Color Picker in JavaScript DOCX Editor
28 Aug 20262 minutes to read
JavaScript DOCX Editor (Document Editor) provides options to customize the color picker using colorPickerSettings in Document Editor settings. The color picker allows customization of its default appearance by selecting between Picker and Palette modes for font and border colors.
Similarly, you can also use the documentEditorSettings property for the standalone DocumentEditor.
The following example code illustrates how to customize the color picker in the Document Editor container.
var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,height: '590px',
//Customizing options for color picker.
documentEditorSettings: {
colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true },
}
});
DocumentEditorContainer.Inject(Toolbar);
container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
container.appendTo('#container');The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
The following table illustrates all the possible properties for the color picker.
| Property | Behavior |
|---|---|
| columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 |
| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false |
| mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ |
| modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true |
| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true |
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 JavaScript (ES5) DOCX Editor for Word documents in this live demo here.