如何使TinyMCE响应

Question

我正在使用基础框架创建一个响应式站点,当页面缩小时,TinyMCE会破坏格式(它没有响应).如何使TinyMCE响应？

Answer 1

可以使用css媒体查询使TinyMCE编辑器响应.只需添加css规则即可设置width属性table.mceLayout和tinyMCE textareas.您将需要使用这些css规则!important,否则它们将被覆盖.

例如,我使用类似于此的css:

/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}

/* on large screens, I use a different layout, so 600px are sufficient */
@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
}

看到这个jsfiddle:http://jsfiddle.net/johannesjh/384uf/

注意:您可能希望使用不同的媒体查询或css类来使用"基础框架"的响应网格.

Answer 2

有一种方法可以让工具栏包裹在较小的屏幕上.

/* make the toolbar wrap */
.mceToolbar td {
    display:table-row;
    float: left;
}
.mceToolbar td:nth-of-type(11){
    clear: left;
}

我为约翰内斯发布了一个包含上述规则的小提琴:

http://jsfiddle.net/joshfeck/gMVSE/