置于Bootstrap模式对话框中时，TinyMCE无法全屏显示

Question

我试图使TinyMCE编辑器出现在一个模态中，但我不能使它全屏。这是一个jsfiddle，如果你调整大小，全屏覆盖模态将覆盖的区域。 http://jsfiddle.net/344y9brr/

Full screen is under View -> Fullscreen

Answer 1

当模态对话框中的元素具有position：fixed时，变换会影响元素位置的计算。当全屏查看tinymce时，这会产生问题。

改变变换：translate（0,0）;到样式表中的以下内容：

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

更新小提琴：jsfiddle.net/344y9brr/4/

变换：translate（0,0）;为固定位置后代创建一个包含块。有关更多信息，请参阅此问题why -webkit-transform messes up with fixed childs。

Answer 2

如果您不想更改.modal-dialog的原始CSS，请在init 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)');
        }
    });
}