Change the background colour of CKEditor

How do I change the background colour of CKEditor from white to blue.

If I change the background-color of the body tag in the contents.css located in the ckediter folder it changes the color as required, but I am trying to change the color of just one of instance of CKEditor not both, is this possible?

Thanks in advance for your feedback.

// The initial value to be displayed in the editor.
$CKEditor_initialValue = "$content";
$CKEditor = new CKEditor();
$CKEditor->basePath = "../webassist/ckeditor/";
$CKEditor_config = array();
$CKEditor_config["wa_preset_name"] = "Edit Web Page (custom)";
$CKEditor_config["wa_preset_file"] = "(custom)";
$CKEditor_config["width"] = "530px";
$CKEditor_config["height"] = "600px";
$CKEditor_config["skin"] = "office2003";
$CKEditor_config["docType"] = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">";
$CKEditor_config["contentsLanguage"] = "";
$CKEditor_config["dialog_startupFocusTab"] = false;
$CKEditor_config["fullPage"] = false;
$CKEditor_config["tabSpaces"] = 4;
$CKEditor_config["filebrowserBrowseUrl"] = "../webassist/kfm/index.php?uicolor=".urlencode(isset($CKEditor_config["uiColor"])?str_replace("#","#",$CKEditor_config["uiColor"]):"#eee")."&theme=webassist_v2&startup_folder=web_pages";
$CKEditor_config["toolbar"] = array(
array( 'Cut','Copy','Paste','PasteText','PasteFromWord','Print','SpellChecker','Scayt'),
array( 'Undo','Redo','Find','Replace','SelectAll','RemoveFormat'),
array( 'BidiLtr','BidiRtl','NumberedList','BulletedList'),
('/'),
array( 'Outdent','Indent','Blockquote','CreateDiv'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Smiley','SpecialChar','PageBreak','TextColor','BGColor','Maximize','ShowBlocks'),
array( 'Image','Flash','Table','HorizontalRule'),
('/'),
array( 'Styles','Format'),
array( 'Font','FontSize','Bold','Italic','Underline','Strike'),
array( 'Bold','Italic','Underline','Strike','Link','Unlink','Anchor','Source'));
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist5.js";
$CKEditor->editor("content", $CKEditor_initialValue, $CKEditor_config);

// The initial value to be displayed in the editor.
$CKEditor_initialValue = "$content2";
$CKEditor = new CKEditor();
$CKEditor->basePath = "../webassist/ckeditor/";
$CKEditor_config = array();
$CKEditor_config["wa_preset_name"] = "Edit Web Page (custom)";
$CKEditor_config["wa_preset_file"] = "(custom)";
$CKEditor_config["width"] = "320px";
$CKEditor_config["height"] = "600px";
$CKEditor_config["skin"] = "office2003";
$CKEditor_config["docType"] = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">";
$CKEditor_config["contentsLanguage"] = "";
$CKEditor_config["dialog_startupFocusTab"] = false;
$CKEditor_config["fullPage"] = false;
$CKEditor_config["tabSpaces"] = 4;
$CKEditor_config["filebrowserBrowseUrl"] = "../webassist/kfm/index.php?uicolor=".urlencode(isset($CKEditor_config["uiColor"])?str_replace("#","#",$CKEditor_config["uiColor"]):"#eee")."&theme=webassist_v2&startup_folder=web_pages";
$CKEditor_config["toolbar"] = array(
array( 'Maximize','Cut','Copy','Paste','PasteText','PasteFromWord','SpellChecker'),
array( 'Undo','Redo','RemoveFormat','BidiLtr','BidiRtl','Source'),
('/'),
array( 'Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Link','Unlink','Bold','Italic','Underline','TextColor','BGColor'),
array( 'Image','Flash','Table','NumberedList','BulletedList'),
('/'),
array( 'Styles','Format',),
array( 'Font','FontSize'));
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist5.js";
$CKEditor->editor("content2", $CKEditor_initialValue, $CKEditor_config);

Sat, 09/10/2011 - 14:39

typeof

Joined: 24/04/2011

Posts: 99

Re: Change the background colour of CKEditor

I haven't done it in PHP, but there is a contentsCss field in editor's config, see http://docs.cksource.com/ckeditor_api/s ... ontentsCss

So, maybe simple

$CKEditor_config["contentsCss"] = "/path/to/your/css/with/blue/background.css";

Sun, 09/11/2011 - 00:24

solcom

Joined: 10/09/2011

Posts: 2

Re: Change the background colour of CKEditor

Thanks, that works great.

Tue, 06/05/2012 - 18:35

whispercom

Joined: 05/06/2012

Posts: 5

Re: Change the background colour of CKEditor

I tried the following code but it didn't appear the change things. My e-card site allows clients to select a background color and and I want to have the default color of the editor content window to be similar and have a contrasting font color. For example if they chose black as the background color I would want the content are black and the default text color to be white. The template color would be passed from a session variable. The code I tried ( which did not work) is: $CKEditor_config["contentsCss"] = "contentsblack.css";

Also where in the code should the new code be placed?

Thanks
whispercom

array( 'Source'),
array( 'Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker','Scayt'),
array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
array( 'BidiLtr','BidiRtl'),
array( 'Bold','Italic','Underline','Strike','-'),
array( 'NumberedList','BulletedList','-','Outdent','Indent'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Link','Unlink','Anchor'),
array( 'Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Maximize'),
array( 'Styles','Format','Font','FontSize'),
array( 'TextColor','BGColor'));
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist1.js";
$CKEditor_config["contentsCss"] = "contentsblack.css";