fontColor.colorPicker.format not working?
I followed the official documentation and configured fontColor.colorPicker.format in my project, but I found that it didn't work. The color output is always in HSL format
ClassicEditor
.create( document.querySelector( '#editor' ), {
fontColor: {
colorPicker: {
// Use 'hex' format for output instead of 'hsl'.
format: 'hex'
}
},
fontBackgroundColor: {
// Don't display the color picker.
colorPicker: false
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
]
} )
.then( /* ... */ )
.catch( /* ... */ );
version: 43.1.0
document: https://ckeditor.com/docs/ckeditor5/latest/features/font.html#color-picker
I'm get same issue when set fontColor format 'hex'.
We investigated it a bit, and it turned out we didn't document that the list of predefined colors is not working with the format option. Looks like you need to configure predefined colors in the same format as requested. Would you mind verifying if it works correctly when you pick a custom color?
Predefined colors marked in red:
The issue lacks the feedback we asked for two weeks. Hence, we've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
My point just need inline style with hex, because some lib not read hsl format
I set hex and found that sometimes it outputs hex, and sometimes it outputs hsl
After retrieving CKEditor’s input, I use a function to replace all HSL-based color codes with HEX equivalents. This ensures that I don’t have to worry about whether a plugin internally uses HSL or if any color format changes occur.
const hslToHex = (h: number, s: number, l: number): string => {
// Conversion logic here
};
export default function replaceHslWithHex(template: string) {
return template.replace(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/g, (match, h, s, l) => {
return hslToHex(parseInt(h), parseInt(s), parseInt(l));
});
}