I find it hard to believe this is not an issue for most everyone that uses CKEditor Extra in MODX.
CKEditor defaults to using the
body tags of the CSS file and applies them to the user input textarea. However, most modern websites include a DIV for content - content is not directly in the body.
That means, for example, if you have a CSS body descriptor that centers the page and has a black background, and then you use a DIV for your MainContent that has a white background and black text, left justified, the CKEditor will show center justified black text on a black background in the textarea. Of course, what you would actually want is a textarea that has a white background and black text, left justified.
This page at the CKEditor site says it will use this behavior, so it is deliberate and by default:
http://ckeditor.com/demo#div
I cannot figure out how to thwart this miscreant default behavior.
So far, I know it is not by editing the config.JS file as follows:
/**
* @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.contentsCss = 'http://www.mywebsite.org/css/ckeditorcontents.css';
config.bodyClass = 'mainContent';
};
(I first tried without the bodyClass line.)
ckeditorcontents.css was a copy of the real CSS file the site uses, only the descriptors for mainContent were copied into the body descriptors.
Does anyone know how to control the CSS that the textarea uses?
Dennis