Прозрачный редактор фона в TinyMCE 5

Question

Я бы хотел изменить цвет фона редактора 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), что должно привести к почти черному, прозрачному фону. Вместо этого фон становится bluei sh и не очень прозрачным. Если я использую rgba (0,0,0,0), фон остается белым (#FFFFFF), который используется по умолчанию в используемой теме (примечание: я скопировал тему оксида-темного в «kairos», просто чтобы быть возможность редактировать в теме, но до сих пор я ничего еще не редактировал).

Возможно, классы "mce-edit-area" и "mce-tinymce" изменили имя в TinyMCE 5 ( по сравнению с TinyMCE 4).

Итак, мой вопрос: как изменить цвет фона на прозрачный?

Примечание 2: я также попробовал «прозрачный» вместо rgba (0, 0,0,0), это тоже не работает.

Answer 1

Используйте переменную @edit-area-iframe-background-color LESS при создании скина , чтобы сделать iframe прозрачным. Также убедитесь, что ваш контент. css не содержит никакого цвета фона.

Вот пример из инструмента скина :

Answer 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, но я этого не проверял.