Is there a way to change the background-color in the editor? I'd like the editor to have the same bgcolor as the page to be edited.
I've tried:
.EditorArea
{
...
background-color: #d7d8e4!important;
}
but no luck. I'd be grateful for any suggestions.
Thanks
Mike
I've tried:
.EditorArea
{
...
background-color: #d7d8e4!important;
}
but no luck. I'd be grateful for any suggestions.
Thanks
Mike
RE: background-color in editorArea
It would really help if anyone has successfully changed the background color of the content area in this editor.
RE: background-color in editorArea
In css/fck_editorarea.css, write :
body {background-color:#FF0000};
and it's OK
RE: background-color in editorArea
RE: background-color in editorArea
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
RE: background-color in editorArea
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