TinyMCE box change color

ASP.NET Maker General Discussion (ASP.NET Maker)
1

If I want to change the background color of a TinyMCE box via CSS, it doesn’t change. Does anyone know why?

2

Please read How to change the text area background color with TinyMCE.If problem persists, show your codes.

3

i tried this codes and none of the works:option 1

// Voeg dit toe aan je startup_script
window.addEventListener('DOMContentLoaded', function() {
    // Zoek de TinyMCE-editor op basis van de class
    var tinyEditor = document.querySelector('.tox.tox-tinymce');

    // Controleer of de editor is gevonden
    if (tinyEditor) {
        // Verander de achtergrondkleur van de editor naar rood
        tinyEditor.style.backgroundColor = 'red';
    } else {
        console.error('TinyMCE-editor niet gevonden.');
    }
});

then i tried this one

option 2

// Voeg dit toe aan je startup_script
window.onload = function() {
    // Zoek de TinyMCE-editor iframe
    var editorIframe = document.getElementById('editor_ifr');
    
    // Controleer of de editor iframe is gevonden
    if (editorIframe) {
        // Verander de achtergrondkleur van de editor naar rood
        editorIframe.style.backgroundColor = 'red';
    } else {
        console.error('TinyMCE-editor iframe niet gevonden.');
    }
};
4

According to the article How to change the text area background color with TinyMCE:

  • In the client script (NOT startup), override the content_css file:


$(document).on("create.editor", function(e, args) {
    //console.log(args.settings);
    args.settings.content_css = "/css/mytinymce.css";
});



  • Add the new css file “mytinymce.css” under the “wwwroot/css” folder with the following css:


.mce-content-body { 
   background: #ff0000; /* red */
}

You may want to look into the default tinymce content.css for other css requirements.

5

In my website, there are 2 modes: dark mode and light mode. When I change the mode from light to dark, the color of the tiny editor doesn’t turn black. But when I refresh the website, then the color of the tiny editor becomes black, and that’s also the case for the light mode. I don’t know what the reason is.

6

To check for dark mode, use:

if (ew.isDark()) {
//... dark mode
} else {
//... default mode
}