After some consideration, I have devised a simpler solution.
Since I am not using the CKEditor jQuery adapter, you may need to make adjustments based on your specific requirements.
I conducted tests using the standard JavaScript integration method.
Here is a brief summary:
Set the necessary variables.
Instantiate the editor.
Add this "addCss" function call:
CKEDITOR.instances[editorId].addCss( 'body { background-color: '+color+'; }' );
That's essentially all there is to it. Below is a sample implementation tailored to your code:
// Include the "id" attribute:
<div id="editor1" class="tp-header" style="background-color:#CCCCCC;">content</div>
// Define the variables, including "headerElementClass".
var headerElementClass = "tp-header";
var color = $('.' + headerElementClass).css('background-color');
var editorId = 'editor1';
// Initialize the instance.
var instanceOne = CKEDITOR.replace( editorId,
{
toolbar: 'Basic',
height: '100px',
width: '500px',
fullPage: false,
customConfig : 'yourCustomConfigFileIfUsed.js'
});
// Add the "addCss" function call:
instanceOne.addCss( 'body { background-color: '+color+'; }' );
If preferred, the addCss function call can be moved to your configuration file (place it outside the editorConfig function).
Best regards,
Joe
Instead of opting for a more complex approach, others might find these concepts beneficial.
You could utilize ( bodyClass: 'nameOfClass' ) and assign a value to the background-color property of that class. However, this becomes challenging with a dynamic background color.
To dynamically assign the background color, consider the following extension of your existing code using 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());
// Set the background color to the body after both document and editor instance are ready
// Trigger 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;
// Utility function to streamline repetitive steps
function setIframeBackground()
{
$("#cke_contents_editor1 iframe").attr("id", "cke_contents_iframe_editor1");
$('#cke_iframe_editor1').each(
function(){ iframeDoc=this.contentWindow.document;}
);
$('#' + idForBody, iframeDoc).css("background-color", color);
}
// Call the function upon initial loading of the editor instance
setIframeBackground();
// Reapply the color when switching back from "source" view mode which destroys the iframe
currentEditorInstance.on( 'mode', function()
{
if(currentEditorInstance.mode == 'wysiwyg')
setIframeBackground();
});
}
);
});
Best regards,
Joe