如何使 TinyMCE 响应式答案

【问题标题】：How to make TinyMCE Responsive如何使 TinyMCE 响应式
【发布时间】：2012-10-20 18:44:29
【问题描述】：

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

【问题讨论】：

我做了一些研究，我认为它可以用完成，但从那里我似乎无法弄清楚
“响应式”是什么意思？

【解决方案1】：

TinyMCE 编辑器可以通过使用 css 媒体查询做出响应。只需添加设置table.mceLayout 的宽度属性和tinyMCE 文本区域的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 类来使用“基础框架”的响应式网格。

【讨论】：

感谢您的 CSS 声明。这为我节省了很多时间。你知道是否有办法让工具栏在更小的屏幕上换行？
不确定这个。但相关链接可能包括：blog.soundtraining.net/2008/06/…stackoverflow.com/questions/10889735/…stackoverflow.com/questions/11394608/…

【解决方案2】：

有一种方法可以让工具栏在较小的屏幕上换行。

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

我对 Johannes 发布的 fiddle 做了一个分支，其中包含上述规则：

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

【讨论】：

谢谢你我要这样使用.mceToolbar > tbody > tr > td { display:table-row; float: left; }
这非常有用。对于大于 600 像素的屏幕，我必须将宽度更改为 100%。
在 mi 情况下使用 Tinymce 4 .mce-toolbar .mce-btn{ display:table-row; float: left; }

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

TinyMCE 5.1 发布时采用了新的移动响应式设计。

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

你如何让它工作？我在我的 init 参数中添加了plugins: "autoresize"，但水平滚动条仍然显示在一个较小的窗口上。使用 tinymce-4.3.2
自动调整大小插件不会使编辑器响应。来自手册：“这个插件会自动将编辑器的大小调整为其中的内容。它通常用于防止编辑器在用户键入可编辑区域时无限扩展。例如，通过给 autoresize_max_height 选项一个值，编辑器将达到设定值时停止调整大小。”

【解决方案6】：

这是我在网站上用来使编辑器调整大小和工具栏随页面大小移动的东西：

.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_advanced_resizing”应设置为“false”。此外，还需要做更多工作才能使其适用于全屏。

【讨论】：

【解决方案7】：

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

【讨论】：