【问题标题】:How to Make TinyMCE's modal dialogs Responsive?如何使 TinyMCE 模态对话框响应?
【发布时间】:2013-11-01 21:02:38
【问题描述】:

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

【问题讨论】:

    标签: css twitter-bootstrap responsive-design tinymce tinymce-4


    【解决方案1】:

    TinyMCE 4 对设计师不友好(绝对定位的元素具有内联的宽度和高度)。坦率地说,它给了我回忆。

    话虽如此,使用以下内容需要您自担风险(也就是测试它并确保它满足您的需求)。我很快想出了这个方法,以便在 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;
                }
    }
    

    【讨论】:

    • 通过一些小的修改(这里和那里的一些填充,一些编辑以使较小的文本框保持内联,.etc),这非常有效。一直在寻找响应式解决方案(即使我们不得不破解它)。
    • 像魅力一样工作。谢谢你拯救了我的一天。
    【解决方案2】:

    我刚刚花了几个小时制作自己的 CSS,以使 TinyMCE 的模态窗口具有响应性,同时保持更好的样式。一旦浏览器宽度低于 515 像素(模态窗口的标准大小),它就会将所有内容调整为移动设备大小。

    它应该适用于任何 320 像素或以上宽的手机屏幕。希望这可以帮助某人。如果您可以以任何方式改进它,请随时编辑。

    仅使用 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;
        }
    }
    

    【讨论】:

    • 这在 chrome 移动视图上看起来很有希望,角度材料 1.1.4 和 tinymce 4.6.6
    【解决方案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;}
    }
    

    【讨论】:

    • 嗨,欢迎来到 SO。请不要只转储代码作为答案。解释您的想法,以便用户更好地了解正在发生的事情。谢谢。
    • Tommaso 的解决方案是 IMO 最好的解决方案,尽管没有包含任何思想解释。
    • @Alexander Shostak 你拿走了一些重要的部分 .mce-title {white-space:normal !important;} .mce-btn-group {overflow-y: hidden !important;} 谢谢你其他一切!
    【解决方案4】:

    通过 Tommaso 的媒体查询和一个小插件+theme.js 修改,我得到了最终结果。现在对话框也会在窗口调整大小时调整大小。 打开所有需要的 plugin.js 并保存为 plugin.min.js 在对话框打开函数中,向对话框窗口添加一个 uniqe id。 现在打开 theme.js (modern) 并保存为 theme.min.js。

    然后找到

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

    在左括号之后放上你的 if 和 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 文件管理器

    我也为插件执行此操作:preview、charmap、codesample、code(在我的情况下为 codemirror)和来自 responsiv filemanager creator 的 easyColorPicker。

    对于一些插件,我必须多做一点 css。 我喜欢它,也许有人会觉得它有帮助

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-06-06
      • 1970-01-01
      • 1970-01-01
      • 2014-06-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-11
      相关资源
      最近更新 更多