tinymce - 如何使 TinyMCE 响应式

Question

我正在使用基础框架制作一个响应式网站，当页面缩小时，TinyMCE 会破坏格式(它不响应)。如何使 TinyMCE 具有响应能力？

Answer 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 类来利用“基础框架”的响应式网格。