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

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