I need to override the editor background color which is being picked up from an external sitewide custom stylesheet ...
oFCKeditor.Config[ "EditorAreaCSS" ] = '/sitestyles.css' ;
... which contains the line ...
body {background-color: #FFFFFF;)
I only allow users to edit certain content on their webpages to avoid spoiling the page layout. eg.
<table bgcolor=black>
<tr>
<td>
<textarea name="editor1" id="editor1" style="width:100%;height:500px;">
<font color=white>here is the text to edit</font>
</textarea>
</td>
</tr>
</table>
so in this case I need the editor to have a black background (like the table it's enclosed in) and not white which is the background for the page defined in the stylesheet.
I need something like
oFCKeditor.Bgcolor = "#000000" ;
Any ideas ?
oFCKeditor.Config[ "EditorAreaCSS" ] = '/sitestyles.css' ;
... which contains the line ...
body {background-color: #FFFFFF;)
I only allow users to edit certain content on their webpages to avoid spoiling the page layout. eg.
<table bgcolor=black>
<tr>
<td>
<textarea name="editor1" id="editor1" style="width:100%;height:500px;">
<font color=white>here is the text to edit</font>
</textarea>
</td>
</tr>
</table>
so in this case I need the editor to have a black background (like the table it's enclosed in) and not white which is the background for the page defined in the stylesheet.
I need something like
oFCKeditor.Bgcolor = "#000000" ;
Any ideas ?
RE:(Solved) Override Editor Background Color
1. Using the FCK API to trap the OnComplete and OnSelectionChange events. See the manual for more info.
2. Setting the color using the "style.backgroungColor" property
Here are the two javascript functions that I placed in the head of the page containing the editor(s);
<script language="JavaScript" type="text/JavaScript">
function FCKeditor_OnComplete( editorInstance ){
SetBackgroundColor(editorInstance);
editorInstance.Events.AttachEvent( 'OnSelectionChange', SetBackgroundColor )
}
function SetBackgroundColor(thisEditor){
var editor_frame = document.getElementById(thisEditor.Name+"___Frame");
var editor_source = editor_frame.contentWindow.document.getElementById("eEditorArea");
editor_source.contentWindow.document.body.style.backgroundColor = '#000000';
editor_source.contentWindow.document.body.style.backgroundImage='none';
}
</script>