Question

我正在使用基础框架创建一个响应式网站，并且当页面缩小时，TinyMCE会破坏格式（它没有响应）。如何使TinyMCE响应？

Answer 1

可以使用css媒体查询使TinyMCE编辑器响应。只需添加设置table.mceLayout的宽度属性和tinyMCE textareas的css规则。您需要使用!important强制执行这些css规则，否则它们将被覆盖。

例如，我使用与此类似的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/

Answer 3

我正在使用TinyMCE的第4版，有一个名为autoresize的插件。它使编辑响应。

Answer 4

以下是我在网站上使用的内容，可以让编辑器调整大小，工具栏随页面大小移动：

.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}

.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
} 

table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}

使用小工具栏，它们在编辑器宽度更改时正确布局。＆＃34; theme_advanced_resizing＆＃34;应该设置为＆＃34; false＆＃34;。此外，还需要做更多工作才能使其全屏工作。

Answer 5

使工具栏响应最新版本的TinyMCE：

.tox-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}
.tox-toolbar__group {
    flex-wrap: nowrap !important;
}

这会将水平滚动条添加到移动设备上的工具栏。

Answer 6

TinyMCE 5.1发布了新的移动响应设计。

为确保其正常工作，您需要在使用TinyMCE的页面顶部添加以下代码。

<meta name="viewport" content="width=device-width, initial-scale=1">

此处提供更多信息：https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it

Answer 7

从 TINYMCE_DEFAULT_CONFIG 中删除宽度和高度。然后正常应用您的样式。

如何使TinyMCE响应

7 个答案: