ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

fontColor.colorPicker.format not working?

Open fanggz2017 opened this issue 1 year ago • 2 comments

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( /* ... */ );

image image

version: 43.1.0

document: https://ckeditor.com/docs/ckeditor5/latest/features/font.html#color-picker

fanggz2017 avatar Sep 17 '24 03:09 fanggz2017

I'm get same issue when set fontColor format 'hex'.

bosemian avatar Oct 08 '24 09:10 bosemian

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: Image

Witoso avatar Oct 15 '24 06:10 Witoso

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.

CKEditorBot avatar Oct 29 '24 23:10 CKEditorBot

My point just need inline style with hex, because some lib not read hsl format

bosemian avatar Oct 30 '24 07:10 bosemian

I set hex and found that sometimes it outputs hex, and sometimes it outputs hsl

sidshen111111 avatar Nov 19 '24 02:11 sidshen111111

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));
  });
}

Alimurrazi avatar Mar 06 '25 03:03 Alimurrazi