How to make TinyMCE Responsive

Question

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?

Answer 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.