CKEditor 5 - how to tell it to not generate colors using "hsl()" so I can use it for email content

Question

I'm using CKEditor v5 so the user can edit some text that will be included in an email that has to be readable by the Outlook email client.

It seems Outlook doesn't like the color styling that CKEditor generates when CKEditor sets the color of some text: <span style="color:hsl(0, 75%, 60%);">red text</span>

The Outlook client ignores the color style and renders the text as normal.

How do I tell CKEditor to use an older color styling, something like: <span style="color:#ff1a1a;">red text</span>

Answer 1

You can provide fontColor configuration to use RGB Hexcode instead of HSL like below in ckeditor.js file

Editor.defaultConfig = {
  toolbar: {
    items: ["heading", "bold", "italic", "link"],
    shouldNotGroupWhenFull: false,
  },
  fontSize: {
    options: [9, 11, 13, "default", 17, 19, 21],
  },
  fontColor: {
    colors: [{
        color: '#E64C4C',
        label: 'Red'
      },
      {
        color: '#E6994C',
        label: 'Orange'
      },
      {
        color: '#E6E64C',
        label: 'Yellow'
      },
    ]
  },
  // This value must be kept in sync with the language defined in webpack.config.js.
  language: "en",
};

CK Editor 5 documentation link: https://ckeditor.com/docs/ckeditor5/latest/api/module_font_fontcolor-FontColorConfig.html