TinyMCE Width

Hi

A customer wants the text the TinyMCE popup to look the same as the text on the page on the site, ie. we need the same fonts and the same character breaking points for when for sentences wrap off the edge of the page. I solved this in a non-MODx website before by setting the width in the TinyMCE init:



This however seems to have no affect under MODx. It appears that there might be a hard-coded style that its overriding the setting I changed when I looked at the source in my browser:



If this is the case, I’m not too happy about hacking the source. Can anyone suggest anything?

Thanks in advance.

You’re gonna have a hard time getting TinyMCE or any rich text editor to do what you want. The width isn’t going to do it for you so I wouldn’t bother with that. However, you can get the text to render the same size and styling by simply adding a custom CSS files that uses simple selectors and classes to the ’Path to CSS file’ configuration option. The point of TinyMCE and other RTE’s isn’t to give you a perfect preview of what the final page will look like but rather an easy to manage the content itself. Styling the content and text within the TinyMCE editor can be done but only within reason. If needed, the person writing the content can always save the page in an unpublished state and preview it.

I strongly discourage editors from styling content using the editor. They should only be indicating the structure, ie paragraph, list, or heading. All styling is done with css. The editor should only worry about placing his text and leave the styling to the site’s css file.

Otherwise you end up with half the page in a huge red font, and a panicking client, which did actually happen to me with one major site!

Thanks for the replies. The intention from the beginning was to only let the user select from a very limited number of styles from the dropdown (but not specifically the font sizes etc.).

It looks like we’re just going to settle for just styling TinyMCE with a CSS to give the user an idea of how the content will look (to my relief). I know this can be set from the MODx configuration page.

Thanks again.

It’s actually quite easy to constrain the width of tinyMCE.

Just search for


And replace width with whatever width you need.

If it doesn’t work, clear your cache and then login again.

I use this method just to see the format of the page.
Sometimes I need to fix linebreaks so the flow of the page is neat and tidy.

And it is also very nice to see directly how the page will render.

Cheers

Thanks to Amerit for an answer that has helped tremendously. I have found, however, a slight deviation due to different versions. I will reiterate Amerit’s answer and add my bit...

To change the width of the TinyMCE, do the following:

1. Go to assets/plugins/TinyMCE*version*/jscripts/tiny_mce/tiny_mce.js

2. Locate one of the following lines of code (I belive this is dependent upon version) and change as noted:

style:{width:’100%’,height:h}}) <-- CHANGE width:’100%’ to desired width -->

OR

{this.settings.width=replace_element.style.width;this.settings.area_width="100%";this.settings.width_style="100%"} <-- CHANGE area_width="100%" to desired width -->

Hope this helps someone as much as this forum has helped me.

-Rat

If you have Tiny MCE version 3.2.4.1 which ships with evolution 1.02,

you need to look for this code in the tiny_mce.js file


To set the width you would change w to the desired width

These above solutions are way, way too complicated, folks!

The easiest solution to make the text editor the same width as your live page is simply create a css file in configuration>tools>interface&features>path to css file: (eg: /assets/site/style.css).

Then add this to the css file: ".mceContentBody {width:640px;}" --w/out quotes and use the width you want

This action overrides the TinyMCE style sheet and whoopee, your text editor width now matches your live page.

For the width to work for me I had to remove the ability for the user to resize the editor window.

e.g. in the initi code
//theme_advanced_resizing : true,

At that point either setting the width via the
width: "300"
or host textarea box width property worked.

HTH

Rob