Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

CKEditor on metronic 8 : italic text color in is always gray


Good morning,
I'm using ckeditor in metronic 8 but I'm observing a problem with italic text format inside the editor. Specifically each time any text is set italic its color became gray.

This happens because CKEditor uses tag <i> to set text to italic but metronic themes css settings force <i> to be gray and is set as "!Important".

Searching for a possibile workaround I've found that In version 4 of CKEditor the tag used for italic text was configurable so it was possible change the default tag <i> to . Unfortunately this doesn't appear to be feasible with CKEditor 5 which is integrated in metronic 8 (navigate to ckeditor documentation and search for coreStyles_italic).

This behaviour can be easily reproduced using the examples available in ckeditor classic example or ckeditor document example

Are there any workaround or specific configurations to avoid this behaviour?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Good spot. i tag is used for icons so we set default color as color: var(--kt-text-muted);. We will fix it in the next update and if the tag is used with the class we put the above color, otherwise, it will use the default body font color.

You can fix it by replacing the code in src/sass/components/helpers/_text.scss as shown below:


// Icons
i[class] {
line-height: 1;
font-size: 1rem;
color: var(--kt-text-muted);
}


And recompile the assets with gulp or webpack.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(