background-color in editorArea

I've been wondering the same thing. I've tried several different changes to the CSS file, and nothing has worked yet.

It would really help if anyone has successfully changed the background color of the content area in this editor.

Hello
In css/fck_editorarea.css, write :

body {background-color:#FF0000};

and it's OK

I figured out how to pass a background color or image to the editing area. It is in php. Send me mail if you want me to post details

Here is the way that I did it (this may not be the best way but I am not a big php expert or anything...)

I wanted to parse out the page background info and send it to the editor as the background.

I needed to be able to pass an initial value of the page background to the editor,
and then let the user change the color/image during editing.

To do this with php I did the following...

I changed the names of the following files:

/fck/fckeditor.php to fckedit.php

/fck/fckeditor.html to fckeditor.php

/fck/js/fck_config.js to fck_config.php

/fck/css/fck_editorarea.css to fck_editorarea.php

In the page that has the editor:


//Function that parses the backgound info out of the page and into $editor_background_parsed

$editor_background_parsed="background-color: FF0000;";
// or
// $editor_background_parsed="background-image: url(http://www.servecenter.net/websites/ima ... eyback.gif);";
// or
// $editor_background_parsed=" background-color: FF0000; background-image: url(http://www.servecenter.net/websites/ima ... eyback.gif);";

print ("<form name='content_edit' method='post' action='result.php'>\n");
//Changed page name below//
include("../../fck/fckedit.php");
$oFCKeditor = new FCKeditor;
$oFCKeditor->Value = $parsed_content;
//Added 4th variable to pass the background info below//
$oFCKeditor->CreateFCKeditor( 'modified_content', '100%', '80%', urlencode($editor_background_parsed));
print ("<input type='submit' value='Save'>");
print ("</form>");


I added a fourth variable to the CreateFCKeditor function

This is the modification I made to fckedit.php (formerly fckeditor.php)

//Added ', $background' below//
function CreateFCKeditor($instanceName, $width, $height, $background)
{
//Added ', $background' below//
echo $this->ReturnFCKeditor($instanceName, $width, $height, $background) ;
}

//Added ', $background' below//
function ReturnFCKeditor($instanceName, $width, $height, $background)
{
$grstr = htmlentities( $this->Value ) ;

$strEditor = "" ;

if ( $this->IsCompatible() )
{
global $FCKeditorBasePath
//Modified the line below//
$sLink = $FCKeditorBasePath . "fckeditor.php?FieldName=".$instanceName."&back=".$background;

(Rest is the same below... until)

//Added name=\"iframe_editor\" -- This is needed (maybe) for runtime changes//
$strEditor .= "<IFRAME src=\"$sLink\" width=\"$width\" height=\"$height\" frameborder=\"no\" scrolling=\"no\" name=\"iframe_editor\"></IFRAME>" ;


(Rest is the same below)


This is the modification I made to fckeditor.php (formerly fckeditor.html)

//This should be about line 26

    <script language="javascript" src="js/fck_config.php?back=<?php echo $_GET[back];?>"></script>

This is the modification I made in fck_config.php (formely fck_config.js)
//This should be about line 30

    config.EditorAreaCSS = config.BasePath + 'css/fck_editorarea.php?back=<?php echo $_GET[back];?>' ;

This is the modification I made to fck_editorarea.php (formerly fck_editorarea.css)
//This starts at about line 18

body
{
font-size: 12px;
font-family: Arial;

                <?php echo urldecode($_GET[back]);?>

}




Whew! I think that's it.


Now, to make changes to the background during editing I figured out the javascript "address" of the background of the editing window. It is as follows:

This will make the background red:

document.frames[0].objContent.DOM.body.style.backgroundColor='FF0000' // NOTE Do NOT use the # with the hex color -it throws an error
This addresses the iframe by number, might be useful for multiple instances of the editor in one page.


document.frames['iframe_editor'].objContent.DOM.body.style.backgroundColor='FF0000'
This addresses the iframe by the name 'iframe_editor' (we changed it to above in fckedit.php (formerly fckeditor.php)).

I have not tested what this will do with multiple instances of the editor in one page...my guess is that you will get errors.


Here are some link examples.

print ("<br><br><a href=\"javascript:\" onclick=\"document.frames[0].objContent.DOM.body.style.backgroundColor='FF0000'\">Background Color</a><br>\n");

print ("<a href=\"javascript:\" onclick=\"document.frames[0].objContent.DOM.body.style.backgroundColor='FFFFFF'\">Clear Background Color</a><br>\n");

print ("<a href=\"javascript:\"

onclick=\"document.frames['iframe_editor'].objContent.DOM.body.style.backgroundImage='url(http://www.servecenter.net/websites/ima ... eyback.gif)'\">Background

Image</a><br>\n");

print ("<a href=\"javascript:\" onclick=\"document.frames['iframe_editor'].objContent.DOM.body.style.backgroundImage='url()'\">Clear Background Image</a><br>\n");


I tried to figure out how to change the background of the editor window with this and skip all of the php/renaming/editing above by using javascript instead, but I could not

get it to go. I made a function to be fired by the onload event in the body tag but I just kept getting errors. If someone else figures it out, let me know.


I intend to make a color and/or image chooser for the page background. I will post something on that later.

I would appreciate any comments you may have and how it works out for you.

If this gets butchered in posting or if it is unclear, email me and I will send you a .txt file or explain further.

-Jim

For a client using white headers i needed to change the background-color of the edit frame.

Thanks to Jim for the "adress" I added this on line 46 in js/fck_editor.js

objContent.DOM.body.style.backgroundColor = "FF0000";

I also tried making a function of it calling it when onLoad was triggerd, but to no avail.

Cheers
Kristoffer