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

user_924597 0
Viewed 737

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>

ckeditor
1 Answers

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

user_161739420
Related