Как сделать модальные диалоги TinyMCE отзывчивыми?

Я работаю с TinyMCE4 на гибкой CMS, используя Bootstrap 3. Я заметил, что диалог/модалы не реагируют на 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;
}

ОТВЕТЫ

Ответ 1

TinyMCE 4 не является дружественным дизайнеру (абсолютные позиции с шириной и высотой). Честно говоря, это дает мне воспоминания.

Сказав это, используйте следующее на свой риск (a.k.a. проверьте его и убедитесь, что он соответствует вашим потребностям). Я быстро придумал, чтобы получить приемлемый внешний вид для изображений, ссылок и медиа-диалогов в Chrome на Android. Если он работает в iOS или более ранних версиях Android, или, случается, не полностью шланги других диалогов, тогда yay, но это не моя основная цель.

Удачи. Возможно, в диалоговом окне TinyMCE 5 будут введены разумные HTML и CSS.

Диалоги TinyMCE

@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

Я только что потратил несколько часов на создание собственного CSS, чтобы сделать модальные окна TinyMCE отзывчивыми, сохраняя при этом приятный стиль. Он просто изменяет размер всего до размера мобильного устройства, как только ширина браузера будет ниже 515 пикселей (стандартный размер модальных окон).

Он должен работать на любом экране телефона размером 320 пикселей или выше. Надеюсь, это поможет кому-то. Не стесняйтесь редактировать, если вы можете улучшить его каким-либо образом.

Проверено только на TinyMCE v4.4.3 с помощью 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

С Tommaso Media Querie и небольшим изменением плагина + theme.js я получил свой окончательный результат. Теперь размер диалогового окна также изменяется при изменении размера окна. Откройте все необходимые файлы plugin.js и сохраните как plugin.min.js в функции открытия диалога, добавьте уникальный идентификатор в диалоговое окно. Теперь откройте theme.js (современный) и сохраните как theme.min.js.

И найти

function WindowManagerImpl (editor) {
    var open = function (args, params, closeCallback) {

после открытой скобки поставьте свои if и elses. Сначала я поместил петлю размера окна:

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

после этого я поставил свои ifs например:

if(args.id === "tinyfilema") {
              args.width = document.getElementById("newschange").offsetWidth;
            args.height = dialoghoehe+50;
         }

и т.д. после

win.on('close', function () {
        closeCallback(win);
      });

Я вставил функцию изменения размера окна

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

Данный пример для последнего RESPONSIVE файлового менеджера

Я делаю это также для плагинов: предварительного просмотра, charmap, codeSample, кода (в моем случае codemirror) и easyColorPicker от ответственного создателя файлового менеджера.

Для некоторых плагинов я должен сделать немного больше CSS. Мне это нравится, и, возможно, кто-то найдет это полезным

Btw. Я использую bootstrap4 и document.getElementById("newschange"). OffsetWidth - это div, в котором реализован редактор. по какой-то причине на небольших мобильных устройствах сайт прокручивается внизу страницы в некоторых диалогах плагинов. в этих плагинах я устанавливаю переменную в открытом диалоге, которая содержит высоту прокрутки.. и при закрытии я прокручиваю обратно до заданной высоты прокрутки из переменной..