How to make TinyMCE Responsive

问题

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?

回答1:

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.

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

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

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

回答2:

There is a way to get the toolbars to wrap on smaller screens.

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

I made a fork of the fiddle that Johannes posted that includes the above rules:

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

回答3:

I'm using version 4 of TinyMCE, there is a plugin named autoresize. It makes the editor responsive.

回答4:

Here is something I use on a site to make the editor resize and the toolbars moves with the size of the page :

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

Using small toolbar, they are properly layed out as the editor width changes. "theme_advanced_resizing" should be set to "false". Also, more work is needed to make it work with fullscreen.

来源：https://stackoverflow.com/questions/12991548/how-to-make-tinymce-responsive

标签

tinymce

responsive-design