Transparent editor background in TinyMCE 5

Question

I would like to change the background color of the TinyMCE editor to transparent. I managed to do so in TinyMCE 4, but the same method seems not to be working in TinyMCE 5.

The method I used in TinyMCE4 was:

  tinymce.init(
   {
    plugins: 'link',
    'force_br_newlines' : true,
    'force_p_newlines' : false,
    'forced_root_block' : 'div',
    width:'99%',
    height: '100%',
    resize: false,
    menubar: false,
    skin: 'kairos',
    statusbar: false,
    plugins : "inlinepopups,insertdatetime,fullscreen",
    body_id:'mission',
    toolbar: 'undo redo | bold italic underline strikethrough | link',
    branding:false,
    init_instance_callback : editorInitialized,
    selector: '#missstat'
   });

and

function editorInitialized()
 {
  b = tinyMCE.editors['missstat'].getWin().document.body;
  $(b).css({'color':'#000000','background-color':'rgba(0,0,0,0)','color':'#FFFFFF'});
  $('.mce-edit-area, .mce-tinymce').css({'background-color':'rgba(0,0,0,0)'});
 }

I found out, that I can change the color of the editor by using rgba(0,0,0,.1), which should result in a nearly black, transparent background. In stead, the background turns blueish, and not very transparent. If I use rgba(0,0,0,0), the background just stays white (#FFFFFF) which is default in the theme I am using (note: I copied the oxide-dark theme to "kairos", just to be able to edit in the theme, but until now I haven't been editing anything yet).

Perhaps, the classes "mce-edit-area" and "mce-tinymce" have changed name in TinyMCE 5 (in comparison to TinyMCE 4).

So my question is: How do I change the background color to transparent?

Note 2: I also tried "transparent" in stead of rgba(0,0,0,0), this doesn't work either.

Lostkeys Lostkeys · Accepted Answer · 2020-04-28T04:31:45

Use the @edit-area-iframe-background-color LESS variable when making a skin to make the iframe transparent. Also make sure your content.css doesn't include any background color.

Here is an example from the skin tool:

Less Variables can be viewed and modified in the skin tool by opening the Styles tab and clicking on Advanced mode.

Transparent editor background in TinyMCE 5

2 Answers