问题
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;
}
回答1:
TinyMCE 4 is not designer friendly (absolute positioned elements with inlined widths and heights). Frankly it's giving me flashbacks.
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.
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;
}
}
回答2:
I've just spent a few hours making my own CSS to make TinyMCE's modal windows responsive whilst maintaining the nicer styling. It just resizes everything down to mobile size once the browser width goes below 515px (the standard size of the modal windows).
It should work on any phone screen 320px wide or above. Hope this helps someone. Feel free to edit if you can improve it in any way.
Only tested on TinyMCE v4.4.3 using Google Chrome v54
@media screen and (max-width: 515px) {
.mce-window {
max-width: 320px !important;
left: calc(50% - 160px) !important;
}
.mce-window-body {
max-width: 100% !important;
min-height: 230px !important;
}
.mce-container.mce-panel.mce-abs-layout-item,
.mce-container.mce-panel.mce-abs-layout-item .mce-container-body.mce-abs-layout {
max-width: 100% !important;
min-height: 190px !important;
}
.mce-flow-layout {
text-align: center !important;
}
.mce-flow-layout-item.mce-btn-group {
border-left: none !important;
}
.mce-panel,
.mce-panel > .mce-container-body,
.mce-foot,
.mce-foot > .mce-abs-layout {
max-width: 320px !important;
text-align: center;
}
.mce-formitem {
width: 300px !important;
left: 10px !important;
display: block !important;
}
.mce-formitem:nth-child(2) {
top: 10px !important;
}
.mce-formitem:nth-child(3) {
top: 50px !important;
}
.mce-formitem:nth-child(4) {
top: 90px !important;
}
.mce-formitem:nth-child(5) {
top: 130px !important;
}
.mce-formitem:nth-child(6) {
top: 170px !important;
}
.mce-container.mce-form.mce-abs-layout-item .mce-container-body.mce-abs-layout .mce-container.mce-form.mce-abs-layout-item {
top: 40px !important;
left: 0 !important;
height: 160px !important;
}
.mce-formitem label {
width: 106px !important;
font-size: 13px !important;
left: 0px !important;
}
.mce-multiline {
max-width: 290px !important;
}
.mce-checkbox {
top: 40px !important;
left: 0 !important;
}
.mce-label {
font-size: 13px !important;
}
.mce-foot .mce-btn-has-text {
position: relative !important;
top: 0 !important;
left: 0 !important;
display: inline-block !important;
margin: 10px 5px !important;
}
.mce-abs-layout-item input {
max-width: 150px !important;
}
.mce-abs-layout-item.mce-has-open input {
max-width: 118px !important;
}
}
回答3:
@media all and (max-width: 820px) {
.mce-window {width:auto !important; top:0px !important; left:0px !important; right:0px !important; bottom:0px !important; background:none !important;}
.mce-window-head {background:#FFFFFF !important;}
.mce-window-body {background:#FFFFFF !important;}
.mce-foot > .mce-container-body {padding:10px !important; width:80% !important;}
.mce-panel {max-width:100% !important;}
.mce-container {max-width:100% !important; height:auto !important; overflow:auto;}
.mce-container-body {max-width:100% !important; width: auto !important; height:auto !important; overflow:auto;}
.mce-form {padding:10px !important;}
.mce-tabs {max-width:100% !important;}
.mce-formitem {margin:10px 0 !important;}
.mce-abs-layout-item {position:relative !important; left: 0 !important; top: 0 !important; width:auto !important;}
.mce-slider {margin-top: 20px !important; margin-bottom: 20px !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; width:80% !important;}
.mce-container-body.mce-window-body.mce-abs-layout iframe {height:500px !important;} /*this only use with responsive file manager 9*/
.mce-tinymce-inline {left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important;}
.mce-tinymce-inline .mce-flow-layout {white-space: normal !important;}
.mce-menu.mce-fixed {max-height: 90%; overflow: auto;}
.mce-title {white-space:normal !important;}
.mce-btn-group {overflow-y: hidden !important;}
}
回答4:
With Tommaso's media querie and a little plugin+theme.js modifying I got my final result. Now the dialog resizes also on window resize. Open all neccesary plugin.js and save as plugin.min.js in dialog open function add a uniqe id to the dialog window. Now open theme.js (modern) and save as theme.min.js.
And find
function WindowManagerImpl (editor) {
var open = function (args, params, closeCallback) {
after open bracket put your ifs and elses. First I placed a window size loop:
if(document.documentElement.clientWidth <=585){
dialogweite=(document.documentElement.clientWidth/100)*94;
dialoghoehe=(document.documentElement.clientHeight/100)*70;
}
if(document.documentElement.clientWidth > 585){
dialogweite=(document.documentElement.clientWidth/100)*70;
dialoghoehe=(document.documentElement.clientHeight/100)*60;
if(dialogweite > 1000){
dialogweite=1000;
}
if(dialoghoehe > 700){
dialoghoehe=700;
}
}
after that I put my ifs for example:
if(args.id === "tinyfilema") {
args.width = document.getElementById("newschange").offsetWidth;
args.height = dialoghoehe+50;
}
etc. after
win.on('close', function () {
closeCallback(win);
});
I inserted a window resize function
window.onresize = function () {
if(document.documentElement.clientWidth <=585){
dialogweite=(document.documentElement.clientWidth/100)*94;
dialoghoehe=(document.documentElement.clientHeight/100)*70;
}
if(document.documentElement.clientWidth > 585){
dialogweite=(document.documentElement.clientWidth/100)*70;
dialoghoehe=(document.documentElement.clientHeight/100)*60;
if(dialogweite > 1000){
dialogweite=1000;
}
if(dialoghoehe > 700){
dialoghoehe=700;
}
}
var plusi = 88;
var die1 =document.getElementById("newschange").offsetWidth;
if(args.id === "tinyfilema") {
win.resizeTo(die1, dialoghoehe+plusi);
}
}
Given example is for the latest RESPONSIVE filemanager
I do this also for plugins:preview, charmap, codesample, code(in my case codemirror) and easyColorPicker from responsiv filemanager creator.
For some of the plugins I have to do a litle bit more css. I like it, and maybe someone will find it helpfull
Btw. I use bootstrap4 and document.getElementById("newschange").offsetWidth is the div where editor is implemented. for some reason on small mobile devices,site scrolls to bottom of page on some plugins dialogs. on these plugins i set a variable on open dialog which contains scroll height.. and on close i scroll back to given scrollheight from variable..
来源：https://stackoverflow.com/questions/19735352/how-to-make-tinymces-modal-dialogs-responsive