Question

我正在使用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;
}

Answer 1

TinyMCE 4不具有设计友好性（绝对定位元素具有内联宽度和高度）。坦率地说，它给了我闪回。

话虽如此，请自行承担风险（a.k.a.测试并确保满足您的需求）。我很快想出了这个，以便在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;
            }
}

Answer 2

我花了几个小时制作自己的CSS，使TinyMCE的模态窗口响应，同时保持更好的造型。一旦浏览器宽度低于515px（模式窗口的标准尺寸），它就会将所有内容调整为移动尺寸。

它适用于任何宽度为320px或以上的手机屏幕。希望这有助于某人。如果您能以任何方式改进它，请随时编辑。

仅使用Google Chrome v54在TinyMCE v4.4.3上测试

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

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

Answer 4

使用Tommaso的媒体查询和一些plugin + theme.js修改，我得到了最终结果。现在，对话框的大小也会随着窗口的大小而改变。打开所有必要的plugin.js并另存为plugin.min.js 在对话框打开功能中，向对话框窗口添加唯一ID。现在打开theme.js（现代）并另存为theme.min.js。

找到

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

在开括号后放入ifs和else。首先，我放置了一个窗口大小循环：

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，responsiv文件管理器创建者的代码（在我的情况下为codemirror）和easyColorPicker。

对于某些插件，我不得不做更多的CSS。我喜欢它，也许有人会对它有帮助

顺便说一句。我使用bootstrap4和document.getElementById（“ newschange”）。offsetWidth是实现编辑器的div。由于某些原因，在小型移动设备上，网站会滚动到某些插件对话框的页面底部。在这些插件上，我在打开的对话框中设置了一个包含滚动高度的变量。在关闭时，我从变量滚动回到了给定的scrollheight。

如何使TinyMCE模态对话响应？

4 个答案: