Search code examples
cssreactjstypescripttinymce

TinyMCE override font style menu items


We use TinyMCE as in-place editors to let user live edit contents. However, when using a dark background with light text, TinyMCE uses this text colour instead of using black.

sample demo of dark background

(Note: please ignore the theme colours, this is only for demo purposes.)

How can the font styles menu use black font colour instead of the one defined in the content?


Solution

  • Take a look at the preview_styles configuration option for TinyMCE:

    https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#preview_styles

    You can stop any/all types of previews with

    preview_styles: false
    

    ...or you can control what parts of it to preview with a string such as:

    preview_styles: 'font-size font-weight'
    

    The default for this value in TinyMCE 6 is:

    font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow
    

    so you can use any subset of those values if you opt to pass a string.