如何使TinyMCE具有响应性 我使用基础框架做了一个响应站点，当页面缩小时，TyMyCE打破了格式（它没有响应）。如何使TinyMCE具有响应性？

TinyMCE编辑器可以通过使用css媒体查询进行响应。只需添加css规则即可设置

table.mceLayout

的宽度属性和tinyMCE文本区域。您需要使用

强制执行这些css规则！重要信息

，否则会被覆盖

例如，我使用与此类似的css：

/*在移动浏览器上，我将宽度设置为100%*/
table.mceLayout，textarea.tinyMCE{
宽度：100%！重要；
}
/*在大屏幕上，我使用不同的布局，所以600px就足够了*/
@仅介质屏幕和（最小宽度：600px）{
table.mceLayout，textarea.richEditor{
宽度：600px！重要；
}
}

请参阅此JSFIDLE：

---

注意：您可能希望使用不同的媒体查询或css类来使用“foundation framework”的响应网格。

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

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

我制作了一把小提琴的叉子，约翰内斯贴了这把叉子，上面有上面的规则：

---

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

以下是我在网站上使用的一些工具，用于调整编辑器的大小，并使工具栏随页面大小而移动：

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

使用小工具栏，当编辑器宽度更改时，它们会正确地布局。

---

“theme\u advanced\u resizing”应设置为“false”。此外，还需要做更多的工作才能使其全屏工作。

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

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

---

这在移动设备的工具栏上添加了一个水平滚动条。

TinyMCE 5.1采用了新的移动响应设计

为了确保它按预期运行，您需要将以下代码添加到使用TinyMCE的页面头部

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

---

此处的详细信息：

从TINYMCE\u DEFAULT\u配置中删除宽度和高度。

---

然后正常应用您的样式。

我做了一些研究，我认为可以用它来完成，但从那里我似乎无法理解“响应”是什么意思？谢谢您的CSS声明。这节省了我很多时间。你知道有没有办法让工具栏在更小的屏幕上显示出来吗？这个不太清楚。但是相关的链接可能包括：谢谢，我将这样使用

.mceToolbar>tbody>tr>td{display:table row；float:left；}

这非常有用。对于大于600px的屏幕，我必须将宽度更改为100%。在使用Tinymce 4

.mce toolbar.mce btn{display:table row；float:left；}

的mi情况下，如何使其工作？我在init参数中添加了

插件：“autoresize”

，但水平滚动条仍然显示在一个较小的窗口中。使用tinymce-4.3.2自动调整大小插件不会使编辑器响应。手册中写道：“此插件自动调整编辑器的大小，使其适应其中的内容。它通常用于防止当用户键入可编辑区域时编辑器无限扩展。例如，通过给autoresize_max_height选项一个值，当达到设定值时，编辑器将停止调整大小。”