如何使TinyMCE的模态对话框响应？ [英] How to Make TinyMCE's modal dialogs Responsive?

问题描述

我使用TinyMCE4在响应式CMS使用Bootstrap 3.我注意到对话框/模态在TinyMCE4没有反应，这是一个有点a。。我开始写一些简单的CSS类来覆盖固定宽度，但似乎有吨，这使得这个任务看起来相当艰巨。所以，我认为，确实有人已经这样做了。这是我到目前为止，但有很多更多的选择器，必须做这个工作。

I'm working with TinyMCE4 on a responsive CMS using Bootstrap 3. I've noticed that the dialog/modals aren't responsive in TinyMCE4 which is a bit of a bummer. I started writing some simple CSS classes to override the fixed widths, but there appears to be tons which makes this an task that seems rather daunting. So, I thought that surely someone else has done this by now. Here is what I have so far, but there is are many many more selectors that have to be done for this to work.

所以，问题，有任何人出现

So, question, has anyone else come up with a complete, fail safe way to make TinyMCE's dialog/modals responsive?

/* 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 （具有内联宽度和高度的绝对定位元件）。

TinyMCE 4 is not designer friendly (absolute positioned elements with inlined widths and heights). Frankly it's giving me flashbacks.

说到这里，使用以下风险自负风险（a.k.a.测试它，并确保它满足您的需求）。我想出了这一点，以获得可接受的外观和感觉的图像，链接和媒体对话框在Android上的Chrome。如果它在iOS或旧版本的Android，或恰好没有完全软管其他对话框，然后yay，但这不是我的主要目标。

Having said that, use the following at yer own risk (a.k.a. test it and make sure it meets your needs). I came up with this quickly to get an acceptable look and feel for the image, link and media dialogs in Chrome on Android. If it works in iOS or older versions of Android, or happens to not totally hose other dialogs then yay, but that wasn't my primary goal.

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

Good luck. Perhaps TinyMCE 5 dialogs will have sane HTML and CSS out of the box.

@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;
            }
}

< a>

这篇关于如何使TinyMCE的模态对话框响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！