tinymce - 如何使 TinyMCE 响应式

Question

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

Answer 1

TinyMCE 编辑器可以通过使用 css 媒体查询做出响应。table.mceLayout只需添加设置宽度属性和 tinyMCE 文本区域的 css 规则。您将需要使用这些 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;
}

我制作了 Johannes 发布的 fiddle 的一个分支，其中包括上述规则：

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

Answer 3

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

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

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

Answer 4

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 5

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

Answer 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”。此外，还需要做更多工作才能使其适用于全屏。

Answer 7

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