<![CDATA[ How to: make CKEditor display CSS properties correctly in WYSIWYG textarea? - My Forums]]> https://forums.modx.com/thread/?thread=90280 <![CDATA[How to: make CKEditor display CSS properties correctly in WYSIWYG textarea?]]> https://forums.modx.com/thread/90280/how-to-make-ckeditor-display-css-properties-correctly-in-wysiwyg-textarea#dis-post-495721
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]]> dennisleahy Apr 23, 2014, 02:40 PM https://forums.modx.com/thread/90280/how-to-make-ckeditor-display-css-properties-correctly-in-wysiwyg-textarea#dis-post-495721 <![CDATA[Re: How to: make CKEditor display CSS properties correctly in WYSIWYG textarea?]]> https://forums.modx.com/thread/90280/how-to-make-ckeditor-display-css-properties-correctly-in-wysiwyg-textarea#dis-post-495959
I was frustrated by not being able to control the CSS that the WYSIWYG (text area) uses, and the answer may be simple to you, but it wasn't my first thought. Or my second...

It is quite likely that you will NOT be able to simply point at your site's CSS file and get the WYSIWYG to display the way you want. The default behavior is to use the CSS body descriptor, not whatever CSS you have for your page's content DIV. I thought the MODX template system was allowing me to sort of declare what DIV class would get the content - even during the content entry.

So, make a copy of your site's CSS file that describes the HTML body, and Save As a new CSS filename. In that new CSS file, copy the code from your content DIV to the body descriptor. That new filename's full URL is what you should then specify in MODX as the CSS file for the CKEditor.

In case this is still not clear, look at this sample CSS and sample HTML:

(CSS file)
body {
color:#FF9; /* light yellow text */
background-color:#000; /*black background*/
}

#mycontent {
color:#000; /* black text */
background-color:#9FF; /*light blue background*/
}

<body>
   <div id="mycontent">
      Sample Content
   </div>
</body>


You may be thinking that your content will be black on a light blue background, but CKEditor will read the body descriptor, and ignore the "mycontent" class - and you'll see light yellow text on a black background in the WYSIWYG display (textarea.)

Hope this helps.

Dennis]]> dennisleahy Apr 24, 2014, 10:24 PM https://forums.modx.com/thread/90280/how-to-make-ckeditor-display-css-properties-correctly-in-wysiwyg-textarea#dis-post-495959