Je pensais à cela et j'ai trouvé une solution beaucoup plus simple.
Je n'utilise pas l'adaptateur CKEditor jQuery, vous devrez peut-être le modifier pour l'adapter à votre situation. Je l'ai testé en utilisant l'approche d'intégration JavaScript standard.
Description rapide:
Définissez les variables.
Créez l'instance de l'éditeur.
Insérer cet appel de fonction "addCss":
CKEDITOR.instances[editorId].addCss('body { background-color: '+color+'; }');
C'est tout ce qu'il ya à faire. Voici un exemple basé sur votre 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+'; }');
L'appel de la fonction addCss peut être déplacé dans votre fichier de configuration si vous préférez (placer en dehors de la fonction editorConfig).
Soyez Eh bien, Joe
l'approche plus Leaving compliquée, quelqu'un pourrait trouver les concepts utiles.
Vous pouvez utiliser (bodyClass: 'nameOfClass'), puis affecter une valeur à la propriété background-color de cette classe. Mais c'est difficile parce que vous avez une couleur de fond dynamique.
Pour affecter la couleur d'arrière-plan dynamique que vous pourriez faire quelque chose comme ceci: A partir de votre code et continuer l'utilisation de jQuery: la réponse de
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's 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();
});
}
);
});
Bien-être, Joe
J'ai même exigences que vous. Je veux changer le fond de ckeditor avec le sélecteur de couleur. Pour cela j'ai essayé d'ajouter la base div au tout le contenu mais j'ai obeservé que lors de l'édition ou de la suppression du contenu du template mon div de base reçoive aussi des effets et soit supprimé parfois ou sa position soit changée. Et dans mon cas, je fournis une fonctionnalité pour ajouter/mettre à jour le modèle. Pouvez-vous m'aider s'il vous plaît dans ceci? –