css – 如何使TinyMCE的模态对话响应？

我正在使用Bootstrap 3在一个响应式CMS上使用TinyMCE4.我注意到,在TinyMCE4中,对话框/模态没有响应,这是一个很大的障碍.我开始编写一些简单的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不是设计师友好的(绝对定位的元素,内置宽度和高度).坦率地说,它给我闪回.

话虽如此,您可以自行承担风险(a.k.a.测试并确保满足您的需求).我很快就想出了一个可以接受的外观和感觉,Android中的Chrome浏览器中的图像,链接和媒体对话框.如果它适用于iOS或旧版本的Android,或者碰巧没有完全软管其他对话框,那么yay,但这不是我的主要目标.

祝你好运.也许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;
            }
}