how to get tinymce (in-browser "rich editor") to preserve indentation

Question

PROBLEM: I use Drupal with a rich-editor, and the rich editor likes to clobber my text by stripping out the indentation and formatting. This would be unacceptable in a desktop editor, but people seem to tolerate this with in-browser wyswigs.

QUESTION: How do I turn this off. I've searched around and I have yet to discover the best practice way of telling the rich-editor to preserve my indentation and text formatting.

Answer 1

The reason that this is happening is the rich-editor is actually an xhtml editor. In xhtml, most tags will (with the exception of the PRE tag), by default, merge multiple whitespace characters to a single space.

To overcome this in tinyMCE, you will need to create a stylesheet containing:

* {white-space: pre;}

And reference the stylesheet as content_css when initializing the editor. Be aware that while you will be preserving your format, it will not be WYSIWYG any more, due to the nature of HTMLs whitespacing munging.

Another option is to wrap your code in a PRE element, but there is no button to do this by default in tinyMCE (or so I believe).

EDIT:

As mentioned by mikl, tinyMCE also has a configuration option for preformatted