How to Make TinyMCE's modal dialogs Responsive?

Question

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 writi

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

Answer 2

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

Answer 3

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..

Answer 4

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