如何使 TinyMCE 的模式对话框响应式？

我正在使用 Bootstrap 3 在响应式 CMS 上使用 TinyMCE4。我注意到 TinyMCE4 中的对话框/模式没有响应，这有点令人失望。我开始编写一些简单的 CSS 类来覆盖固定宽度，但似乎有大量的 CSS 类使得这项任务看起来相当艰巨。所以，我想现在肯定有人已经做到了这一点。这是我到目前为止所拥有的，但是还需要完成更多选择器才能使其工作。

那么，问题来了，有没有其他人想出一个完整的、安全的方法来使 TinyMCE 对话框/模式响应？

/* TINYMCE CUSTOMISATION */

.mce-window {
    max-width: 90% !important;
}



.mce-panel {
    max-width:100% !important
}

.mce-tabs {
    max-width: 100% !important;
}

.mce-container-body {
    max-width:100% !important;
}

.mce-container {
    max-width:100% !important;
}

TinyMCE 4 对设计者不友好（具有内联宽度和高度的绝对定位元素）。坦白说，这让我回想起过去。

话虽如此，使用以下内容需要您自担风险（也称为测试它并确保它满足您的需求）。我很快就想出了这个办法，以便在 Android 上的 Chrome 中获得可接受的图像、链接和媒体对话框的外观和感觉。如果它可以在 iOS 或旧版本的 Android 中运行，或者碰巧不能完全处理其他对话框，那么是的，但这不是我的主要目标。

祝你好运。也许 TinyMCE 5 对话框将具有开箱即用的合理 HTML 和 CSS。

@media only screen and (max-device-width: 549px) {

    #mce-modal-block {
    }

    .mce-window {
        width: auto !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: none !important;
    }

    .mce-window-head {
        background: #fff !important;
    }

    .mce-window-body {
        background: #fff !important;
    }

    .mce-foot {
    }

        .mce-foot > .mce-container-body {
            padding: 10px !important;
        }

        .mce-foot button {
        }

    .mce-panel {
        max-width: 100% !important;
    }

    .mce-container {
        max-width: 100% !important;
        height: auto !important;
    }

    .mce-container-body {
        max-width: 100% !important;
        height: auto !important;
    }

    .mce-form {
        padding: 10px !important;
    }

    .mce-tabs {
        max-width: 100% !important;
    }

        .mce-tabs .mce-tab, .mce-tabs .mce-tab.mce-active {
        }

    .mce-formitem {
        margin: 10px 0 !important;
    }

    .mce-btn > button {
    }

    .mce-abs-layout-item {
        position: static !important;
        width: auto !important;
    }

        .mce-abs-layout-item.mce-label {
            display: block !important;
        }

        .mce-abs-layout-item.mce-textbox {
            -webkit-box-sizing: border-box !important;
            -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
            display: block !important;
            width: 100% !important;
        }

        .mce-abs-layout-item.mce-combobox {
            display: flex !important;
        }

            .mce-abs-layout-item.mce-combobox > .mce-textbox {
                -ms-flex: 1 1 auto;
                -webkit-flex: 1 1 auto;
                flex: 1 1 auto;
                height: 29px !important;
            }
}