如何从外部颜色选择器动态更改Ckeditor实例的背景颜色

我在CMS中的容器上使用了一些外部样式，其中一种是css背景色，然后我们使用一个CKEditor（4.x）实例来管理容器中的内容。一个问题是，当您希望容器具有黑色（#000）背景，但编辑器具有标准白色（#FFF）背景，并且您希望使用白色文本时，您显然无法在编辑器中看到文本，而无法在工作时进行一些假背景处理，或者用不同颜色的文字，然后换成白色。。。。不管你怎么旋转它，它都是PITA，当然不是用户友好的

所以我们要做的是使用外部表单字段中的颜色选择器中的change事件，启动一个函数，动态地更改编辑器实例背景。我从前面的一个问题（）中得到了这个基础：

该方法在表单加载时触发一次，效果非常好，加载时颜色选择器中的任何值都被正确设置，并且编辑器继承该背景颜色。但是，当我更改选择器的颜色时，它不会更新实例。但是，如果我删除

instancerady

复选框，它将执行相反的操作，load fire将不起作用，但是对选择器的任何更改都可以完美地工作

我猜ck实例在我的第二个场景的第一次调用中没有准备好，这意味着我可能必须将它放在那里，所以我的问题是，如何让后续调用像第一次调用一样正常运行

---

谢谢你的见解

我设法找到了一个工作解决方案，在实例准备就绪后存储该实例，并将其用于将来的任何调用

ck_instance: null,

set_background: function(hex) {
    if (this.ck_instance === null) {
        if (typeof CKEDITOR !== "object") { return; }
        this.ck_instance = CKEDITOR.instances['body'];
        if (typeof this.ck_instance !== "object") { return; }
        this.ck_instance.on('instanceReady', function(e) {
            // First time
            e.editor.document.getBody().setStyle('background-color', hex);
            // in case the user switches to source and back
            e.editor.on('contentDom', function() {
                e.editor.document.getBody().setStyle('background-color', hex);
            });
        });
        return;             
    }
    // First time
    this.ck_instance.document.getBody().setStyle('background-color', hex);
    // in case the user switches to source and back
    this.ck_instance.on('contentDom', function() {
        this.ck_instance.document.getBody().setStyle('background-color', hex);
    });
}

这两个必需的触发现在都工作了，一旦加载表单，在新编辑器中设置保存的背景，然后再次通过颜色选择器更改回调

ck_instance: null,

set_background: function(hex) {
    if (this.ck_instance === null) {
        if (typeof CKEDITOR !== "object") { return; }
        this.ck_instance = CKEDITOR.instances['body'];
        if (typeof this.ck_instance !== "object") { return; }
        this.ck_instance.on('instanceReady', function(e) {
            // First time
            e.editor.document.getBody().setStyle('background-color', hex);
            // in case the user switches to source and back
            e.editor.on('contentDom', function() {
                e.editor.document.getBody().setStyle('background-color', hex);
            });
        });
        return;             
    }
    // First time
    this.ck_instance.document.getBody().setStyle('background-color', hex);
    // in case the user switches to source and back
    this.ck_instance.on('contentDom', function() {
        this.ck_instance.document.getBody().setStyle('background-color', hex);
    });
}