TinyMCE не может быть полноэкранным при размещении в модальном диалоговом окне Bootstrap

Question

Я пытаюсь сделать редактор TinyMCE появляться внутри модального, но я не могу сделать его полноэкранным. Вот jsfiddle, если вы измените его размер, полноэкранный режим покрывает область, покрываемую модальным. http://jsfiddle.net/344y9brr/

Full screen is under View -> Fullscreen 

Answer 1

Когда элемент внутри модального диалога имеет положение: фиксированы, прообразы влияют на вычисление позиции элемента. Это создает проблему, когда tinymce рассматривается fullscreen.

Изменение transform: translate (0, 0); к следующему в таблице стилей:

.modal.in .modal-dialog { 
    -webkit-transform: none; 
     -ms-transform: none; 
     -o-transform: none; 
      transform: none; 
} 

Обновлено скрипку: jsfiddle.net/344y9brr/4/

преобразования: перевод (0, 0); создает содержащий блок для потомков с фиксированной позицией. См. Этот вопрос why -webkit-transform messes up with fixed childs для получения дополнительной информации.

Answer 2

Если вы не хотите, чтобы изменить оригинальный CSS из .modal-dialog, сделать это при инициализации TinyMCE:

setup: function (editor) { 
    editor.on('FullscreenStateChanged', function (e) { 
     if (e.state) { 
      $('.modal-dialog').attr('style', 'transform: none !important'); 
     } else { 
      $('.modal-dialog').attr('style', 'transform: translate(0,0)'); 
     } 
    }); 
}