TinyMCE 5 中的透明编辑器背景答案

【问题标题】：Transparent editor background in TinyMCE 5TinyMCE 5 中的透明编辑器背景
【发布时间】：2020-02-09 10:09:27
【问题描述】：

我想将 TinyMCE 编辑器的背景颜色更改为透明。我设法在 TinyMCE 4 中做到了，但同样的方法似乎在 TinyMCE 5 中不起作用。

我在 TinyMCE4 中使用的方法是：

  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'
   });

和

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)'});
 }

我发现，我可以使用 rgba(0,0,0,.1) 更改编辑器的颜色，这应该会产生近乎黑色的透明背景。相反，背景变成蓝色，而且不是很透明。如果我使用 rgba(0,0,0,0)，背景将保持白色 (#FFFFFF)，这是我正在使用的主题中的默认设置（注意：我将氧化物深色主题复制到“kairos”，只是为了可以在主题中编辑，但到目前为止我还没有编辑任何东西）。

也许，“mce-edit-area”和“mce-tinymce”类在 TinyMCE 5 中已更改名称（与 TinyMCE 4 相比）。

所以我的问题是：如何将背景颜色更改为透明？

注意 2：我也尝试了“透明”而不是 rgba(0,0,0,0)，这也不起作用。

【问题讨论】：

标签： jquery css tinymce

【解决方案1】：

使用@edit-area-iframe-background-color LESS 变量when making a skin 使iframe 透明。还要确保您的 content.css 不包含任何背景颜色。

这是example from the skin tool：

通过打开样式选项卡并单击高级模式，可以在皮肤工具中查看和修改较少的变量。

【讨论】：

【解决方案2】：

我找到了解决办法：

代替

$('.mce-edit-area, .mce-tinymce').css({'background-color':'rgba(0,0,0,0)'});

使用

$('.tox-edit-area__iframe').css({'background-color':'rgba(0,0,0,0)'});

瞧，你的背景是透明的！

PS 如果你不使用 iframe，那么你可以使用 .tox-edit-area 代替 .tox-edit-area__iframe，但我没有测试过。

【讨论】：