TinyMCE variable width with theme_advanced_resize_horizontal: true

[archonic]

I've found lots of examples on how to init tinyMCE for horizontal resizing with the manual jQuery method but I can't seem to get it to work within tinymce-rails context. I've got the plugin autoresize and theme_advanced_resize_horizontal: true in tinymce.yml and have restarted the server - no effect.

Anyone know how to have tinyMCE inherit width from it's parent using tinymce-rails?

[archonic]

The content is changing widths but only once upon load and if I drag the resizer. Looks like I'll need some JS to fire resize on window resize. The 'kitchen sink' is a hard lower limit too. I'll have to remove buttons or rearrange them to accommodate lower widths. Does anyone know if I can continue to resize the content and have the kitchen sink use overflow: hidden?

[archonic]

Got it. I needed both of these in tinymce.yml since tinymce tries to be helpful by remembering the theme's width in a cookie.

theme_advanced_resize_horizontal: true
theme_advanced_resizing_use_cookie: false

Make sure the textarea has width="100%". Then I needed

.mceEditor > table {
  width: 100% !important;
}

in my application css. TinyMCE doesn't have very kosher behaviour with setting widths (http://stackoverflow.com/questions/6436934/tinymce-width-and-height-disobedient).

The lower limit is determined by the items in the kitchen sink so I'd recommend rearranging items and only putting what you need. With bootstrap, moving other elements out of the way to accomodate tinyMCE may also be a good option.

[ryanple]

This helped. :) I'm glad I stumbled across this.

[archonic]

Glad I could help! Tinymce4 allows the kitchen sink to wrap as well. It's not terribly nice to edit on mobile but it's possible and doesn't have any horizontal scrollbars.