Question

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

Full screen is under View -> Fullscreen

Answer 1

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

将转换：翻译（0,0）; 更改为样式表中的以下内容：

bundle config build.ruby2d --with-cflags=\"-std=c99\"

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

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

Answer 2

如果您不想更改.modal-dialog的原始CSS，请在初始化时执行以下操作：

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

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

2 个答案: