我正在使用 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 不是设计者友好的(具有内联宽度和高度的绝对定位元素)。坦率地说,它让我回想起过去。
话虽如此,使用以下内容需要您自担风险(也就是测试它并确保它满足您的需求)。我很快想到了这个,以便在 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;
}
}
关于css - 如何使 TinyMCE 的模态对话框响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19735352/