By default the WYSIWYG editors in mojoPortal use the same CSS as the site. The goal of this is to make things appear in the editor as close as possible to how they will appear in the page. However, in some cases it doesn't work out that well because the styles in the CSS depend on container elements such as divs with CSS classes on them and these containers are not present in the context of the editor since the editor is usually rendering inside an iframe with a simple html page that is part of the editor itself. It works failry well if the styles for fonts and headings are set directly for those elements rather than on container elements. For example in the latest Artisteer skins the font styles don't appear in the editor because they are assigned on selectors that use classes from container elements that are not part of the edited content and are not present in the simple html wrapper page used by the editor.

There can also sometimes be problems caused by the CSS that works well for the page itself but causes problems in the editors for particular web browsers.

Therefore we have made it possible for you to override the CSS used in the WYSIWYG editors so that it does not use the same CSS as the page but instead uses a specific CSS file that you create for use in the editor.

For example you could create a CSS file named editorstyles.css and put it in the  /Data/style folder, and then you can add this setting in your user.config file to make the WYSIWYG editors use that file.

<add key="EditorCssUrlOverride" value="/Data/style/editorstyles.css" />

Created 2012-02-03 by Joe Audette