如何使 TinyMCE 响应 [英] How to make TinyMCE Responsive

问题描述

我正在使用基础框架制作一个响应式网站，当页面缩小时，TinyMCE 破坏了格式(它不是响应式的).如何让 TinyMCE 具有响应性?

I am making a Responsive site using the foundation framework and TinyMCE breaks the format when the page is scaled down(it's not responsive). How do I make TinyMCE responsive?

推荐答案

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

The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.

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

E.g., I use css similar to this:

/* 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/

See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/

注意:您可能希望使用不同的媒体查询或 css 类来利用基础框架"的响应式网格.

Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.

这篇关于如何使 TinyMCE 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！