TinyMCE 放置在 Bootstrap 模式对话框中时不能全屏显示答案

【问题标题】：TinyMCE cannot be full screen when placed in Bootstrap modal dialogTinyMCE 放置在 Bootstrap 模式对话框中时不能全屏显示
【发布时间】：2015-02-08 21:23:32
【问题描述】：

我尝试让 TinyMCE 编辑器出现在模态框内，但我无法使其全屏显示。这是一个 jsfiddle，如果你调整它的大小，全屏会覆盖模态将覆盖的区域。 http://jsfiddle.net/344y9brr/

Full screen is under View -> Fullscreen

【问题讨论】：

问题似乎是当浏览器处于全屏模式时，模态不会全宽...有趣。
这能回答你的问题吗？ stackoverflow.com/a/18522320/1861459
pherris ，不，这使模态全屏（反过来，模态内的东西，在这种情况下为tinymce，全屏。我想要一个常规模态，而tinymce按钮将使其全屏）
我不确定您是否能够在不覆盖模态窗口的情况下使 tinymce 全屏显示。可能我不太明白你的问题。
tinymce 具有全屏功能（位于 View->fullscreen 中）。但它不会覆盖全屏宽度，高度会覆盖模态占用的宽度。如果我将 html 代码移到模态之外，它将覆盖所有内容。

标签： javascript twitter-bootstrap tinymce

【解决方案1】：

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

在您的样式表中将 transform: translate(0, 0); 更改为以下内容：

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

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

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

【讨论】：

@Abdo-Host，单击展开按钮 -- 编辑器展开以适应屏幕。什么不适合你？

【解决方案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)');
        }
    });
}

【讨论】：