Redactor: Strange Behaviour When Moving Text Around. The Fix

We've been plagued ever since installing Redactor as our Editor by its behaviour when text is moved around after initial entry. For example, deleting a carriage return to move text up so as to continue from the previous line would invariably introduce a change in the font face and line spacing on the published page.

We eventually figured out how to remove the effect, even though we can't stop the behaviour itself, and pass along this tip in the hope it might help others.

The trick is to go into Redactor's redactor.css file and change a few entries to reflect your own font-face, size and line height. Thus, when Redactor introduces changes these still take effect but go to your requirements, and not to what the css file originally said.

Changes are here:

(change font-family to your font-family: original CS has font-family starting with Arial)

.redactor_editor, .redactor_editor:focus, .redactor_editor div, .redactor_editor p, .redactor_editor ul, .redactor_editor ol, .redactor_editor table, .redactor_editor dl, .redactor_editor blockquote, .redactor_editor pre, .redactor_editor h1, .redactor_editor h2, .redactor_editor h3, .redactor_editor h4, .redactor_editor h5 { font-family: Candara,Arial, Helvetica, Verdana, sans-serif !important; }

(change font-size and line height to your own: original CSS has line height 1.45em

.redactor_editor, .redactor_editor:focus, .redactor_editor div, .redactor_editor p, .redactor_editor ul, .redactor_editor ol, .redactor_editor table, .redactor_editor dl, .redactor_editor blockquote, .redactor_editor pre { font-size: 14px !important; line-height: 1.0em !important; }