By default JCE adopts the style settings in your template stylesheet template.css. If your template design adversely affects the styling or layout when making changes to content in JCE Editor, you might want to customise the CSS by creating a custom template for JCE.
I often find this becomes a problem if the site uses a dark background or background images.
Firstly make a copy of your template.css file and give it a different name, eg template-jce.css.
Delete any unnecessary CSS in the stylesheet, just keep the main design settings. Amend any other CSS that affects the editor view.
Upload this to your templates folder on your web server.
Navigate to main JCE Control Panel in Components.
Select: Editor Global Configuration
Scroll down to Editor Styles and select Custom CSS Files
In the next section type the following path into the Custom CSS Files text field, replacing the file name if necessary:
templates/$template/css/template-jce.css
Adjust the stylesheet as required to further improve the view in the Editor.
