Adjustment of Editor's Text Edit Background

If the body layout of a website is determined by CSS, you may have problems while using one of the CMSimple editors on the market. They may repeat background color and background image determined by the stylesheet. To solve the problem I offer solutions for the usage of the following editors:

1. OEDIT (the editor which comes with CMSimple)
2. TinyMCE (version 2.0.6.1)
3. Xinha (out of Jens Bröcher’s CMSimplePlus 1.3 box)
4. WysiwygPRO (comercial version)
5. FCKeditor

For later versions of the editors the following suggestions may still work, but may need an update as well.

Given web site example: A site with black background and white (or light grey) text. Since it is supposed to be a horror page there is a row of flickering candles on the top as background image. The stylesheet will define the body as follows:

body {background: Black url(/dokuphp/editors/adjustment_of_editor_s_text_edit_background//images/candles.gif) repeat-x 0px 0px; color:White;}

Upon opening of one of the editors you may have an edit area with a black background, white text and a row of flickering candels. But you want: white background, black letters as text and no candels annoying you.

Solutions:

1. OEDIT

At the end of your stylesheet (file: stylesheet.css) just add the line:

.retrieve{background-image:none;background-color:White;color:Black;}

2. TinyMCE

At the end of your stylesheet (file: stylesheet.css) just add the lines:

form textarea#text{width:500px;} 
.mceContentBody{/*background-image: none;*/ background-color: White; color: Black;}

(Width in TinyMCE is also determined by the width of the editor control button lines)

The first line will determine the width of the editor window. However, the width will also be determined by the length of the row of editor buttons at the top of the editor. If one of the rows is too long, you have to fiddle around with the editor script, which is another [How to] story. The second line will determine background and text color. So far, TinyMCE seems not to care about background images defined by body property. But this may change. In this case just outcomment /*background-image: none;*/.

3. Xinha

Xinha of Jens Bröcher’s CMSimplePlus box determines the editor’s background differently. Here, it is determined by the xinha.php file which you will find in the subdirectory called cmsimple. In there find the line:

xinha_config.stylistLoadStylesheet("'.$pth["file"]["stylesheet"].'");

Below this line (below!!!) add an additional line that it - altogether - will look like:

xinha_config.stylistLoadStylesheet("'.$pth["file"]["stylesheet"].'");
xinha_config.stylistLoadStylesheet("'.$pth["folder"]["template"].'xinha.css");

This new “xinha.css” file, which you have to create yourself and add to your specific stylesheet folder, will just redefine the body declaration. It just will hold the following:

body {background-color: White; background-image: none; color: Black;}

This will overwrite the original body declaration, since this new CSS file is called by “xinha.php” after the original “stylesheet.css” file.

4. WysiwygPRO

Similar to Xinha, WysiwygPRO calls up the original “stylesheet.css” file via its “WP.php” file and determines the background of the editing area using its code. To change that find in “WP.php” (which should be in the “cmsimple” subfolder) the line: Code: $editor→set_stylesheet($pth[’folder’][’template’].’stylesheet.css’);

Outcomment the line and add another one below of it that it - altogether - will look like:

//$editor->set_stylesheet($pth['folder']['template'].'/dokuphp/editors/adjustment_of_editor_s_text_edit_background/stylesheet.css');
$editor->set_stylesheet($pth['folder']['template'].'/dokuphp/editors/adjustment_of_editor_s_text_edit_background/wp.css');

Now generate a new style sheet file called “wb.css” in your template folder and add what you want. For example you could add:

body{padding:5px; margin:0;background-color:White;color:Black;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
img {border:0;}
h1,h2,h3{margin:0;font-size:16pt;font-weight:normal;padding:0 0 6px;margin:0;}
h4{margin:0;font-size:16pt;font-weight:normal;margin:0 0 6px;padding:0;}
h5{margin:0;font-size:14pt;font-weight:bold;margin:0 0 6px;padding:0;}
h6{margin:0;font-size:12pt;font-weight:normal;margin:0 0 6px;padding:0;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,td a, p a{color:black !important; background-color:#FFEBAF;}

This will give you the opportunity to provide the editor with a different layout, than the original stylesheet would have been able to do.

Nonetheless, a second way would be to redefine the body declaration as explained for “Xinha”.

5. FCKeditor

You can precisely simulate the output of your site inside FCKeditor, including background colors, font styles, sizes and custom CSS definitions. To do that, just point the setting

FCKConfig.EditorAreaCSS = '/path/my_editor_area.css' ;

in your configuration file (normally ./fckeditor/fckconfig.js) to the CSS file that you want the editor to use.

More information could be found at: docs.fckeditor.net

editors/adjustment_of_editor_s_text_edit_background.txt · Last modified: 2008/06/24 12:31 by till
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0