I thought about it, and I came up with a much simpler solution.
I do not use the JQuery CKEditor adapter, so you may need to change it to suit your situation.
I tested it using the standard JavaScript integration approach.
Short review:
Set the variables.
Create an editor instance.
Insert this call to the addCss function:
CKEDITOR.instances[editorId].addCss( 'body { background-color: '+color+'; }' );
That's all. Here's a sample based on your code:
// I added the "id" attribute: <div id="editor1" class="tp-header" style="background-color:#CCCCCC;">content</div> // Declare the variables, I added "headerElementClass". var headerElementClass = "tp-header"; var color = $('.' + headerElementClass).css('background-color'); var editorId = 'editor1'; // Create the instance. var instanceOne = CKEDITOR.replace( editorId, { toolbar: 'Basic', height: '100px', width: '500px', fullPage: false, customConfig : 'yourCustomConfigFileIfUsed.js' }); // Insert the "addCss" function call: instanceOne.addCss( 'body { background-color: '+color+'; }' );
The addCss function call can be transferred to your configuration file if you want (put it outside the editorConfig function).
Cheers, Joe
Leaving a more complex approach, someone may find useful concepts.
You can use (bodyClass: 'nameOfClass') and then assign a value to the background-color property of this class. But it is difficult because you have a dynamic background color.
To assign a background color dynamically, you can do something like this: Starting with your code and continuing to use jQuery:
var editorId = 'editor1'; var instance = CKEDITOR.instances[editorId]; var color = $('.' + headerElementClass).css('background-color'); // Create a unique body id for this instance "editor1" ( bodyIdForeditor1 ) var idForBody = 'bodyIdFor' + editorId; if (instance) { CKEDITOR.remove(instance); } // Use bodyId instead of the original bodyClass assignment $('#' + editorId).ckeditor({ toolbar: 'BasicHtml', height: '100px', width: '500px', fullPage: false, bodyId : idForBody }); $('#' + editorId).val($('.' + headerElementClass).html()); // After both the document and editor instance are ready, // assign the background color to the body // Wait for the document ready event $(document).ready(function(){ // Wait for the instanceReady event to fire for this (editor1) instance CKEDITOR.instances.editor1.on( 'instanceReady', function( instanceReadyEventObj ) { var currentEditorInstance = instanceReadyEventObj.editor; var iframeDoc=null; // Create a function because these steps will be repeated function setIframeBackground() { // The CKEditor content iframe doesn't have a Name, Id or Class // So, we'll assign an ID to the iframe // it inside a table data cell that does have an Id. // The Id of the data cell is "cke_contents_editor1" // Note that the instance name is the last part of the Id // I'll follow this convention and use an Id of "cke_contents_iframe_editor1" $("#cke_contents_editor1 iframe").attr("id", "cke_contents_iframe_editor1"); // Now use the iframe Id to get the iframe document object // We'll need this to set the context and access items inside the iframe $('#cke_iframe_editor1').each( function(){ iframeDoc=this.contentWindow.document;} ); // Finally we can access the iframe body and set the background color. // We set the Id of the body when we created the instance (bodyId : idForBody). // We use the iframe document object (iframeDoc) to set the context. // We use the "color" variable created earlier $('#' + idForBody, iframeDoc).css("background-color", color); } // Call the function to set the color when the editor instance first loads setIframeBackground(); // When the user switches to "source" view mode, the iframe is destroyed // So we need to set the color again when they switch back to "wysiwyg" mode // Watch for the "mode" event and check if we're in "wysiwyg" mode currentEditorInstance.on( 'mode', function() { if(currentEditorInstance.mode == 'wysiwyg') setIframeBackground(); }); } ); });
Cheers, Joe